vue-cli3+node+mysql

1.建一个vue-cli3项目

• cmd 中 vue create 项目名
• npm run serve 运行
• 以上没问题者看下一步 以上有问题者 出门右转 有多远走多远

2.首先你得有一个mysql

1. 下载方式及操作过程及可能出现的问题及解决办法详见上一篇博文

2. 我用的可视化工具是navicat for mysql

   • 建立连接
     
     

     如果这报错 自己百度 我上一篇也提了一嘴 自己翻翻 实在不行就百度

   • 建数据库和表（看数据库名表名别写错）
     
     

3.准备工作结束 正文开始

• 目录结构
  

• 代码填充

  userApi.js

  const express = require('express');
  const router = express.Router();
  
  const DBHelper = require('../utils/DBHelper');
  const sql = require('../sqlMap');
  
  /*
  
  // 增加用户 注释去掉可以用 之所以注释掉是因为我暂时不用它
  router.post('/addUser', (req, res) => {
    let sqlStr = sql.user.add;
    let params = req.body;
    let conn = new DBHelper().getConn();
    conn.query(sqlStr, [params.name,params.pwd], (err, result) => {
      if (err) {
        res.json(err);
      } else {
        res.json(result);
      }
    });
    conn.end();
  });
  */
  
  
  // 查询学生用户
  router.post('/selectUser', (req, res) => {
    let sqlStr = sql.user.selects;
    let params = req.body;
    let conn = new DBHelper().getConn();
    conn.query(sqlStr, [params.name,params.pwd], (err, result) => {
      if (err) {
        console.log('失败');
      } else {
        res.json(result)
        console.log('找到了');
      }
    });
    conn.end();
  });
  
  module.exports = router;
  

  DBHelper.js

  // 数据库连接助手
  const mysql = require('mysql');
  
  class DBHelper{
    // 获取数据库连接
    getConn(){
      let conn = mysql.createConnection({
        // 数据库连接配置
        host:'localhost',
        port:'3306',
        user:'root',
        password:'123456',//数据库密码
        database:'hrxy'  // 数据库名
      });
      conn.connect();
      return conn;
    }
  }
  
  module.exports = DBHelper;
  
  

  index.js

  // node后端服务器
  const http = require('http');
  const bodyParser = require('body-parser');
  const express = require('express');
  const userApi = require('./api/userApi');
  
  let app = express();
  let server = http.createServer(app);
  
  app.use(bodyParser.json());
  app.use(bodyParser.urlencoded({
    extended: false
  }));
  
  // 后端api路由
  app.use('/api/user', userApi);
  
  // 启动监听 端口不要被占用
  server.listen(8887, () => {
    console.log(' success!! port:8887')
  })
  

  sqlMap.js

  // sql语句
  var sqlMap = {
    user: {
      // 添加用户 slogin和 tlogin是表名
      add: 'insert into slogin(name,pwd) values (?, ?)',
      // 查询用户
      selects: 'select * from slogin where name like ?',
      selectt: 'select * from tlogin where name like ?'
    }
  }
  
  module.exports = sqlMap;
  
  

  vue.config.js(名不要改固定的)

  module.exports = {
    devServer: {
      proxy: { // 设置代理
        '/api': {
          target: 'http://192.168.0.2:8887', // 请求的目标服务器接口
          changeOrigin: true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
          pathRewrite: { // 重写请求
            '^/api': '/api' // 替换target中的请求地址，也就是说在请求http://192.168.0.2:8887/XXXXX这个地址的时候直接写成/api即可。
          }
        }
      }
    }
  }
  

  编写完成之后，就可以在项目根目录下安装依赖npm install express mysql body-parser;
  保险起见 建议加一条 npm install
  接着，我们需要在server这个文件夹下，执行npm init -y命令
  保险起见 建议加一条 npm install
  然后，可以直接执行node index.js命令
  如果这报错 建议检查一下代码 端口啥的有没有被占用

• 测试

  • tabbar.vue

    这根据自己需要进行截取 我这是项目里的组件直接拿过来了

    <template>
      <!--下方有需要注释的部分-->
      <div>
        <form>
          <div class="radio">
            <input type="radio" name="student" class="status" value="学生">学生
            <input type="radio" name="student" class="status" value="教师">教师
          </div>
          <div class="init">
            <input type="text" placeholder="   学工号" id="id" v-model="id"><br>
            <label></label><br>
            <input type="password" placeholder="   密码" id="pwd" v-model="pwd"><br>
            <label></label><br>
          </div>
          <button type="button" @click="lffirst">登录</button><br>
          <label id="reget">忘记密码？</label>
        </form>
      </div>
    </template>
    
    <script>
    import axios from "axios";
    
    export default {
      name: "tabbar",
      data(){
        return{
          url:[
            {surl:'api/user/selectUser'},
            {turl:'api/user/selectTuser'}
          ],
          //身份
          status:null,
          //id
          id:null,
          //pwd
          pwd:null,
          result:false
        }
      },
      methods: {
        lffirst(){
          //身份选了老师还是学生 好判断isshow 是true还是false
          var resualt=false;
          var radioview=document.getElementsByClassName('status');
          for (let i = 0; i < radioview.length; i++) {
            if (radioview[i].checked){
              this.status=radioview[i].value;
              resualt=true;
              break;
            }
          }
          if(!resualt){
            alert('请选择登录者身份');
            return resualt
          }
          //开启数据库（根据身份选择开启的数据库表）
          //id//连接数据库验证学工号密码
          var idview=document.getElementById('id').value
          if(idview==''||idview == undefined || idview == null){
            alert('请输入学工号')
            return
          }
          else{
            var pwdview=document.getElementById('pwd').value
            if(pwdview==''||pwdview == undefined || pwdview == null){
              alert('请输入密码')
              return
            }
            else {
              //数据库登录验证 1
              let name=idview
              let pwd=pwdview
              let url=''
              if(this.status=='学生'){
                url=this.url[0].surl
              }else {
                url=this.url[1].turl
              }
              axios.post(url,{
                name,pwd
              }).then(res=>{
    
                // 测试完成后需要注释掉
                console.log(res);
    
                if(res.data.length!=0){
                  if(pwdview===res.data[0].pwd){
                    this.id=idview
                    //把用户选择传过去
                    this.$router.replace({path:"/loginfirst",
                      query:{status:this.status,id:this.id}});
                  }
                  else {
                    alert('用户名或密码不正确')
                    return
                  }
                }
                else {
                  alert('用户名或密码不正确')
                  return
                }
              }).catch(err=>{
                //测试完成后需要注释掉
                console.log(err)
              })
              // 1
            }
          }
        }
      }
    }
    </script>
    
    <style scoped>
    .radio{
      left: 28%;
      top: 22%;
      width: 40%;
      position: absolute;
      display: flex;
      font-size: 13px;
      color: #826f6f;
    }
    .radio>input{
      flex: 1;
    }
    .init{
      top:33%;
      left:18%;
      position: absolute;
    }
    .init>input{
      width: 200px;
      height: 28px;
      border-radius: 10px;
    }
    button{
      position: absolute;
      top: 71%;
      left: 10%;
      width: 265px;
      height: 30px;
      background-color: #2fbbbb;
    }
    #reget{
      position: absolute;
      top: 90%;
      left: 5%;
      font-size: 12px;
      color: #797676;
    }
    </style>
    

成功后：

• 报错问题的解决 暂时就发现了一个问题

  1. 404
     第一个原因
     第二个原因
     如果你更改了 sqlMap.js 和userApi.js里的内容
     那么就需要重新启动一下端口
     要不然也会出现 404问题

     ok