1.建一个vue-cli3项目
- cmd 中 vue create 项目名
- npm run serve 运行
- 以上没问题者看下一步 以上有问题者 出门右转 有多远走多远
2.首先你得有一个mysql
-
下载方式及操作过程及可能出现的问题及解决办法详见上一篇博文
-
我用的可视化工具是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>
-
成功后:
-
报错问题的解决 暂时就发现了一个问题
-
404
第一个原因
第二个原因
如果你更改了 sqlMap.js 和userApi.js里的内容
那么就需要重新启动一下端口
要不然也会出现 404问题ok
-