vue+node前后端实现登录注册功能

使用vue cli3脚手架搭建一个vue项目

1. 创建一个vue_cms项目，没安装脚手架全局安装即可，安装过程选择默认的即可

vue create vue_cms

2. 安装路由，axios，完成后启动项目，

cnpm i vue-router axios -S

3. 在项目根目录下新建一下vue还需要修改一下端口,避免端口冲突

module.exports = {
   
    devServer:{
   
        host: 'localhost',
        port: 5000
    }
}

4. 启动项目cnpm run server
5. 如果需要跨域还需要在devServer配置跨域（这里可以在后台设置允许跨域，或则我们设置同源）

    proxyTable: {
   
      "/api": {
   
        target: "http://tingapi.ting.baidu.com/v1/restserver/ting",
        changeOrigin: true,
        pathRewrite: {
   
            '^/api': '/api'
        }
    }

6. 接下来最重要的一步,最难的一个技术…先放着不管

使用node+mysql

构建基本的项目

1. 使用express框架和body-parser

cnpm init -y
cnpm i express body-parser -S

2. 打开wampserver集成工具（或则程序员工具自己配置都可以）
3. 打开可视化工具（Navicat）链接上数据库，wamp的用户名是’root’,密码是空（当然不用mysql的话，可以自己使用json模拟数据）
   
4. 新建一个数据库，然后插入一些数据
   
   

node.js的app.js文件

虽然我们不用跨域，但这里我设置了跨域；该文件是入口文件；路由还有全局的配置都可以在这里配置

// 创建express服务器
const express = require('express')
const app = express()
// 注册解析 表单数据的 body-parser
const bodyParser = require('body-parser')
// 将请求响应设置content-type设置为application/json
const router = require('./router.js')
app.use('/api/*', function (req, res, next) {
   
	// 设置请求头为允许跨域
    res.header("Access-Control-Allow-Origin", "*");
    // 设置服务器支持的所有头信息字段
    res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
    // 设置服务器支持的所有跨域请求的方法
    res.header("Access-Control-Allow-Methods", "POST,GET");
    // next()方法表示进入下一个路由
    next();
});
// post
app.use(bodyParser.urlencoded({
   extended:false}))
// 处理json格式的参数
app.use(bodyParser.json())
// 配置路由
app.use(router)
// 服务器已经启动
app.listen('4000',function(){
   
    console.log('running...')
})

router路由文件

路由文件只出路路由规则，这里使用post传递过来的用户名和密码

const express = require('express')
const router = express.Router()
const services = require('./services.js')
// router.get('/',services.start)
// 登录功能
router.