-------------------------------------配置介面信息----------------------------------------

像user数据模型一样，先建一个数据信息的模型 models -> Profile.js.

这个数据模型和user一样，都是需要引入mongoose、实例化Schema，以及创建一个Schema。把UserSchema改为ProfileSchema。导出的信息也是Profile。

现在就是一个资金流水的页面，我们需要的栏位是：收支类型、收支描述、收入、支出、账户现金、备注。其中，收入、支出和账户现金是必填项。

这个Profile数据模型长这样：

然后我们写个Profile的api，routes -> api -> profiles.js，现在我们到server.js里面引入一下这个api文件。同样的，也use一下。

(记住这个介面，后面要用)

现在我们写下profiles介面。

------------------------------------------添加信息----------------------------------------

和user介面一样，我们需要用到express、router、passport。

然后引入刚才的Profile数据模型。再写一个测试介面，确保可以走通。

我们到postman中测试一下。

说明我们的介面是没问题的。那么我们的配置就完成了。

我们来添加一下信息：这个应该是一个post方法。私有介面。要用到passport来验证我们当前的token。

我们来验证下，用户填写的内容是存在的

其他的数据模型中的栏位也同样判断下。然后我们存一下，存完后我们把存下来的这个数据被返回。

我们到postman中测试下：

在header处，我们应该有个验证，

在body处，我们填写上响应的参数：

send下：

现在我们添加信息的介面就完成了。

--------------------------------------获取信息--------------------------------------------

需要验证token，是个get请求。

如果没有数据，就返回个状态码，并提示没有数据，如果有，就返回这个Profile。

现在到postman中测试

刚才手残，多点了下add，所以有两条数据。

这个介面是获取所有数据，现在来获取单个信息：

需要前端来传一个id。

现在到postman中测试：

如果我们传一个不存在的id

------------------------------------获取编辑、删除---------------------------------------

编辑和删除很类似

去测试下：

可以成功更改。

现在做删除介面：

调试一下：

这时候再获取下全部信息：

就没有刚才删掉的那条信息了。

但是这里有个问题，我可以连续请求两次删除这个id，但是第二次的时候就会catch住，说删除失败。这个问题，前端那一般是删完了就刷新列表，不会请求第二次删除。暂且不管吧。放个链接先Mongoose v5.4.19: Schemas

随口问了后台GG一句，后台GG说先查询，然后我就把介面改成了这个样子：

现在再调试：

第一次删除：

同样的数据删除第二次：

随便输个id：

OK，介面就写到这。只入门，只入门，我是前端，我是前端。接下来构建前端页面。

-----------------------------------前后端连载---------------------------------------------

先看下cli的版本，3.X

然后创建一个vue项目 比如 叫client

会有一些需要我们选择的一些东西，我们现在手动选择一些选项：

按空格是选择/取消

然后按回车，使用个history模式，使用scss等。

现在我们项目的目录结构：

然后我们就可以cd到client再把它启动起来了。

现在我们就有两个终端来同时启动前端和后端了。

前端的话要进入到client中，后端是要在项目根目录启动（nodemon）

这样分开启动比较麻烦，我们现在来一个前后端连载：

安装下 concurrently，这个模块就可实现将多个终端启动的项目都绑定到一块。

现在我们看下我们在项目根目录这有个package.json ，在client目录内也有一个package.json。

start和server 启动的是后端的项目。

client中的文件，server启动的是前端的项目。我们可以给它起个名字：

当我们npm start的时候，就会启动serve，就会执行vue-cli-service serve。

我们再配置下根目录下的package文件。

意思是：我们要确保前端已经依赖了这里面的模块，当启动的时候，首先要来装一下client里面的依赖模块。再配置下启动：

npm start是我们刚在client的package文件中设置的，不过我们还要告诉它要启动的路径 --prefix client。这时候就会给我们启动前端的项目了。

现在我们后端可以启动了（npm run serve），前端也可以启动了(npm run client)。

接下来我们把前端项目和后端项目绑定到一块。

这里的是转义。

现在 npm run dev就可以同时启动两端了。

现在方便多了，我能说我开三个终端，设备卡死吗？（一个启动前端，一个启动后端，一个装包）。

----------------------------------------前端准备工作-------------------------------------

现在做一下前端项目的调整，把我们不需要的东西都给删除掉。

调整后的Index.vue：

调整后的router：

现在页面长这样：

然后我们把reset.css给引进来。CSS Tools: Reset CSS

现在，前端的准备工作就完成了。

推荐阅读：