准备
用 vue-cli 脚手架生成生
1 2
| npm install -g @vue/cli init <template> <app-name> 从一个远程模板生成一个项目 (遗留 API, 依赖 `@vue/cli-init`)
|
关于 vue-cli 的文档可以看这里
安装脚手架完成后就可以看到一个完整的项目结构了
后端配置
接下来我们需要生辰成一个本地服务器,在根目录下新建一个 server 的文件夹,文件夹里面新建
api.js(配置项目所需 api)
db.js(配置数据库的链接)
index.js(服务器入口文件)
这个三个文件
安装 express,mongoose 模块
1
| npm install express mongoose --save
|
在 db.js 中配置配置 mongodb
1 2 3 4 5 6 7 8 9 10
| "server/db.js"
const mongoose = require("mongoose")
mongoose.connect("mongodb://localhost:27017/peopleinfo")
const db = mongoose.connection db.once("error", () => console.log("Mongo connection error")) db.once("open", () => console.log("Mongo connection successed"))
|
在根目录下新建 models 文件夹,在该文件加下新建 peopleinfo.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| "models/peopleinfo.js"
const mongoose = require("mongoose")
const peopleinfoSchema = mongoose.Schema({ name: String, sex: String, hobby: String, })
const People = mongoose.model("Peopleinfo", peopleinfoSchema)
module.exports = People
|
直接用 node 来操作数据库比较繁琐,一般推荐使用’mongoose’这个第三方模块来对数据库进行增删改查,关于 mongoose 中 Schemas,Models 的概念可以在官方网站上阅读
英文:https://mongoosedoc.top/docs/cnhome.html
中文:http://mongoosejs.com/
在 peopleinfo.js 中定义了一个 peopleinfoSchema 的 Model,项目中对人物信息的增删改查我们可以基于这个 People 的 Model 来进行操作。
接下来编写增删改查的 API,进入 api.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
| server / api.js
;("use strict") const db = require("./db") const peopleinfomodels = require("../models/peopleinfo") const express = require("express") const router = express.Router()
router.post("/api/createinfo", (req, res) => { let newPeopleinfo = new peopleinfomodels({ name: req.body.name, sex: req.body.sex, hobby: req.body.hobby, }) newPeopleinfo.save((err, data) => { if (err) { res.send(err) } else { res.send("created successed") } }) })
router.get("/api/getallinfo", (req, res) => { peopleinfomodels.find((err, data) => { if (err) { res.send(err) } else { res.send(data) } }) })
router.delete("/api/deleteByid/:id", (req, res) => { peopleinfomodels.findOneAndRemove( { _id: req.params.id }, function (err, res) { if (!err) { } } ) res.sendStatus(200) })
module.exports = router
|
在这个文件中,首先引入了三个模块,引入 express,使用它的路由功能(express 文档),还用到了 mongoose 中基于模型操作的一些方法,最后导出路由,在入口文件 index.js 中引入。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
| server / index.js
const api = require("./api")
const fs = require("fs")
const path = require("path")
const bodyParser = require("body-parser")
const express = require("express") const app = express()
app.use(bodyParser.json()) app.use( bodyParser.urlencoded({ extended: false, }) ) app.use(api) app.use(express.static(path.resolve(__dirname, "../dist"))) app.get("*", function (req, res) { const html = fs.readFileSync( path.resolve(__dirname, "../dist/index.html"), "utf-8" ) res.send(html) }) app.listen(8088) console.log("success listen…………")
|
打开更目录下的 package.json 文件,找到”script”这个选项,添加一条命令
1
| "server": "node server/index.js"
|
在终端中执行 ‘npm run server’来启动本地后台。在这之前确保本地已经安装了 MongoDB,并且已经启动。
链接数据库成功后终端会有这样的提示:
到这一步,后台的配置算是结束了。
前端配置
为了方便页面的架构,推荐使用Element Ui,Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。在 vue cli 脚手架里面使用 Element,首先要在 main.js 里面引入,
接下来我们就可以在项目中愉快的使用了,在项目中我们会用一个表格来实现对数据库的增删改查功能,界面可以这样简单的来安排:
- 添加按钮:实现增
- 更新按钮:实现改
- 删除按钮:实现删
- 详情按钮:实现查
前端的代码可以在项目的/src/pages/home.vue 里查看,表格的属性设置也可以在 element 官网上的组件里查看。有几个注意注意项:
- 删除单个 item 的时候要给按钮绑定一个 id 属性,根据 id 来删除数据库中的对应数据,id 的值可以用 scope.row(‘_id’)来取
- 更新单项数据的时候需要重新复制下原先的数据,使用Object.assign()这个方法。
- 项目里我使用了 axios,它是一个基于 Promise 用于浏览器和 nodejs 的 HTTP 客户端。他有以下特点:
- 从浏览器中创建 XMLHttpRequest
- 从 node.js 发出 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防止 CSRF/XSRF