Node.js+express+vue+MySQL的全栈登录系统（基于windows 10系统）

最近两天在写一个权限的demo，最近也刚刚将这个框架搭建并写出了一个小的登录系统，权当练手，趁此机会分享出来给想要全栈开发一个小项目的同学做一个小参考，希望大家批评指正。闲话少说，我们直接来上手实战。

创建一个Node底层服务端项目工程

因为本项目要涉及到前端视图层数据呈现，底层通过express框架来实现对数据访问获取，而不是通过直接利用原生Node进行访问，因为原生Node还是有一些缺陷的，而express和koa都是比较受欢迎的，这里选择express是因为对koa并不是很熟悉。具体服务端工程搭建可以参考我的前一篇博客：express创建Node服务端项目，当大家按照上述操作搭建并能够成功出现运行结果时，就已经证明你已经成功创立了服务端工程，我这里创建的工程名字叫做AccessServer，工程目录结构如下图所示：
在这里插入图片描述
具体对应文件夹的作用大家可以自行去搜索一些资料，这里就不再赘述。这里要解释一下我所创建的三个文件夹，分别是models、services、sql。

  1. models主要是对应实体类

  2. services是一些逻辑层代码

  3. sql文件夹放置的是封装连接数据库的一些api

  4. routers文件夹下放置的是路由文件
    重要的文件夹就介绍完了，接下来教大家如何安装依赖并进行数据库连接。既然要连接mysql数据库，首先保证你的PC上安装了mysql数据库，然后如果想要更加直观的查看数据，建议安装一个图形界面应用，想sqlyog或Navicat Premium，具体选择根据大家喜好而来，但最好还是手动来编写sql代码，毕竟提升动手能力。我们先要创建一个数据库，我这里测试就写的随意一些，名字就叫做kitty，然后新建一个表，叫sys_user,表结构如下图所示：

    CREATE TABLE sys_user (
    id bigint(20) NOT NULL AUTO_INCREMENT COMMENT ‘编号’,
    name varchar(50) NOT NULL COMMENT ‘用户名’,
    password varchar(100) DEFAULT NULL COMMENT ‘密码’,
    email varchar(100) DEFAULT NULL COMMENT ‘邮箱’,
    mobile varchar(100) DEFAULT NULL COMMENT ‘手机号’,
    PRIMARY KEY (id),
    UNIQUE KEY name (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">&nbsp;</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,会出现以下页面：
在这里插入图片描述
分别输入测试你存入数据库中的一些用户名和密码，会给出对应反馈。这个工程主要为新手提供一些参考，若有不足，恳请批评指正。

本文demo地址：

https://gitee.com/Marinc/nodeServer，nodevue文件下放置的是前端vue登录页面工厂，启动时需分别启动。本文的node版本与Vue版本如下：
在这里插入图片描述

# node.js # mysql # express
Logo
Vue

前往低代码交流专区

更多推荐

cover

Mac 使用vscode 创建vue项目后修改文件提示：权限不足，以超级用户身份重试

avatar Vue
cover

基于nodejs+vue云计算的城乡医疗卫生服务系统[程序+论文+开题]-计算机毕业设计

avatar Vue
cover

ElasticSearch迁移至openGauss

avatar Vue