Node.js+express+vue+MySQL的全栈登录系统（基于windows 10系统）
最近两天在写一个权限的demo，最近也刚刚将这个框架搭建并写出了一个小的登录系统，权当练手，趁此机会分享出来给想要全栈开发一个小项目的同学做一个小参考，希望大家批评指正。闲话少说，我们直接来上手实战。
创建一个Node底层服务端项目工程
因为本项目要涉及到前端视图层数据呈现，底层通过express框架来实现对数据访问获取，而不是通过直接利用原生Node进行访问，因为原生Node还是有一些缺陷的，而express和koa都是比较受欢迎的，这里选择express是因为对koa并不是很熟悉。具体服务端工程搭建可以参考我的前一篇博客：express创建Node服务端项目，当大家按照上述操作搭建并能够成功出现运行结果时，就已经证明你已经成功创立了服务端工程，我这里创建的工程名字叫做AccessServer，工程目录结构如下图所示：
具体对应文件夹的作用大家可以自行去搜索一些资料，这里就不再赘述。这里要解释一下我所创建的三个文件夹，分别是models、services、sql。
-
models主要是对应实体类
-
services是一些逻辑层代码
-
sql文件夹放置的是封装连接数据库的一些api
-
routers文件夹下放置的是路由文件
重要的文件夹就介绍完了，接下来教大家如何安装依赖并进行数据库连接。既然要连接mysql数据库，首先保证你的PC上安装了mysql数据库，然后如果想要更加直观的查看数据，建议安装一个图形界面应用，想sqlyog或Navicat Premium，具体选择根据大家喜好而来，但最好还是手动来编写sql代码，毕竟提升动手能力。我们先要创建一个数据库，我这里测试就写的随意一些，名字就叫做kitty，然后新建一个表，叫sys_user,表结构如下图所示：CREATE TABLE
sys_user(
idbigint(20) NOT NULL AUTO_INCREMENT COMMENT ‘编号’,
namevarchar(50) NOT NULL COMMENT ‘用户名’,
passwordvarchar(100) DEFAULT NULL COMMENT ‘密码’,
emailvarchar(100) DEFAULT NULL COMMENT ‘邮箱’,
mobilevarchar(100) DEFAULT NULL COMMENT ‘手机号’,
PRIMARY KEY (id),
UNIQUE KEYname(name)
) ENGINE=InnoDB AUTO_INCREMENT=33 DEFAULT CHARSET=utf8 COMMENT=‘用户管理’;
这里创建一些基础字段，需要大家可以进行相关拓展，创建成功后大家可以插入一些测试数据，具体测试数据大家可根据个人喜好来。数据库和表设计完成之后，我们在工程要引入mysql驱动，找到刚才创建工程的文件夹，进入里面，我的是D盘下面的nodeworkspace下，则在cmd下输入：cd D：nodeworkspace/AccessServer
进入工程文件夹后，我们开始安装所需要的依赖，此时输入：npm install mysql --save,建议安装淘宝镜像后下载，速度会快很多。在node package management官网上可以查阅到在node里如何使用mysql，具体可以去查阅,这里截取一下其连接代码：
我们在对应工程下router文件夹下，新建一个test.js,用来测试数据库的连接，相应代码及目录结构如下图所示：
其中host是数据库访问的端口号，user是数据库名，password是你数据库密码，database是你本工程所使用的的数据库名称，文件完成以后，运行该文件，若连接成功，则会打印相关数据，命令行下输入命令：node routes/test.js,若连接成功，则命令行查询出你数据库id为1那条记录的用户名，如下图所示：
测试成功以后，我们要分装一个公共文件，在每个需要进行数据库连接的文件内调用就好，新建一个sql文件夹，并在下面新建一个dbConfig.js文件，分装一个数据库连接函数，具体如下：
至此一个base方法就封装好了，在需要连接数据库时调用就好。接下来在routes文件夹下新建一个users.js文件，这个文件主要放置的是对sys_user表，也就是我们前面新建的那张表的路由。
在这个文件里，我们要首先将express框架引入进来，同时引入express框架的路由，因为路由主要是用来分发接口，不涉及具体业务数据，这里我们以登录为例，我们以post方式来进行接口访问，所以主要关注：router.post('/login',service.login),剩下的代码除了头部三个引入和最后module.exports = router,其它代码大家可以忽略，最后代码module.exports = router是将接口暴露，要不无法访问此接口，这个非常重要。路由文件写好以后，我们要关注其逻辑层代码，即我们引用的services，如上图所示，在根目录下新建service文件夹，并在其文件夹下新建userService.js文件，这个文件里主要放的是逻辑处理，包括查询与返回数据等。userService.js文件下关于用户登录部分代码如下图所示：
首先我们要引用刚才所创建的dbConfig.js文件，这个文件封装了连接数据库的基本方法。底层大概代码就是这样。
创建一个vue前端项目工程
1.这里需要创建一个vue前端工程，若对此不是很熟悉或熟练，可以参考我的上一篇博文：手把手教你利用脚手架搭建一个Vue工程，工程搭建完成后，进入该工程文件夹下引入相关依赖，我用element-ui来简单做UI框架，需要安装的依赖有：
npm install element-ui --save
npm install axios --save
axios基于promise用于浏览器和node.js的http客户端,我们主要用它来进行http访问。在main.js文件夹下引入以下文件：
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'
Vue.use(axios);
Vue.use(ElementUI);
2.好了，这些引用完成以后，我们在src文件夹下新建一个views文件夹，这里主要存放我们的一些页面文件，在这里我们新建Login.vue文件，用来写前端布局页面和一些方法，具体页面内容如下：
<template>
<el-form :model="loginForm" :rules="fieldRules" ref="loginForm" label-position="left" label-width="0px" class="demo-ruleForm login-container">
<h2 class="title" style="padding-left:22px;" >系统登录</h2>
<el-form-item prop="username">
<el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="账号"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码"></el-input>
</el-form-item>
<div class="error-wrap">
<span class="error error-show" v-show="errorTip" style="float: left;color: red">用户名或者密码错误</span>
</div>
<el-form-item >
<el-col class="line" :span="1"> </el-col>
</el-form-item>
<el-form-item style="width:100%;">
<el-button type="primary" style="width:48%;" @click.native.prevent="reset">重 置</el-button>
<el-button type="primary" style="width:48%;" @click.native.prevent="login" :loading="loading">登 录</el-button>
</el-form-item>
</el-form>
</template>
<script type="text/ecmascript-6">
import Cookies from 'js-cookie'
import axios from 'axios'
export default {
name:'Login',
data(){
return{
themeColor: "#14889A",
loading: false,
errorTip:false,
loginForm: {
username: 'god',
password: '123456',
},
fieldRules: {
username: [
{ required: true, message: '请输入账号', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
]
},
checked:true
}
},
methods:{
login(){
this.loading = true;
axios.post("/users/login",{loginForm:this.loginForm}).then((response)=>{
let res = response.data;
console.log("res"+res.result.name);
if(res.status == '0'){
this.errorTip = false;
alert("登录成功"+res.result.name);
this.$router.push("/home")
}else{
this.errorTip = true;
this.loading = false;
return;
}
})
},
reset(){
this.loginForm.username='';
this.loginForm.password='';
}
}
}
</script>
<style lang="scss" scoped>
.login-container {
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-border-radius: 5px;
background-clip: padding-box;
margin: 100px auto;
width: 350px;
padding: 35px 35px 15px 35px;
background: #fff;
border: 1px solid #eaeaea;
box-shadow: 0 0 25px #cac6c6;
.title {
margin: 0px auto 30px auto;
text-align: center;
color: #505458;
}
.remember {
margin: 0px 0px 35px 0px;
}
}
</style>
登录代码大家可以自己写一下，我这里随便写了一下，目录结构如下：
3.这时，我们还需要在路由里配置一下，即在routers文件夹下的index.js配置路由，加入代码：
import Login from '@/views/Login'
routes: [
{
path:'/login',
name:'登录',
component:Login
}
]
4.此后还有很重要的一点，我们需要在config文件夹下配置一下index.js,需要配置一下代理我们才能正确访问后端接口，具体如下：
一切完成之后，我们前后端就分别搭建好了，我们开始运行项目，进入后端工程AccessServer文件夹下，输入命令行：node bin/www启动后端项目，
接下来启动前端vue项目，在该项目文件夹下输入：npm run dev，启动项目，在浏览器里访问：http://localhost:8080/#/login,会出现以下页面：
分别输入测试你存入数据库中的一些用户名和密码，会给出对应反馈。这个工程主要为新手提供一些参考，若有不足，恳请批评指正。