最近这两天有点闲，通过自研学习了如何使用express框架搭建后台以及vue框架开发前端。express框架是用来搭建web服务，是nodejs的二次封装。vue就是前端框架。那么可以通过搭建express框架用来写接口，vue框架写页面用来调用接口，形成全栈的开发。
1、搭建express过程
使用 express的脚手架快速搭建：express-generator
首先安装express 和express-generator
npm install -g express，npm install -g express-generator（这是全局安装）
创建项目
express -e 目录
npm install 安装依赖
npm start 开启项目
安装后台热更新模块（这样方便开发，修改文件就不需要重启启动了，会热更新）
npm i nodemon --save(局部安装，下载到项目依赖，所以一定要进入项目目录里安装)
安装完成nodemon之后，需在package.json的**scripts**修改命令行：
"scripts": {
"start": "nodemon ./bin/www"
},
安装完成之后的项目结构目录
│ app.js
│ package-lock.json
│ package.json
│
├─bin
│ www
│
├─public
│ ├─images
│ ├─javascripts
│ └─stylesheets
│ style.css
│
├─routes
│ index.js
│ users.js
│
└─views
error.jade
index.jade
layout.jade
以上就是完成对express脚手架的安装啦~~ 端口号3000。
接下来介绍一下app.js：
app.use(express.static(path.join(__dirname, 'public'))); //静态托管，在搭建大前端时将页面放置public文件夹。因为我们是前后端分离模式，所以可以把这行代码注释了
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');//视图模板，在搭建大后端的时将模板放置views文件夹，因为我们是前后端分离模式，所以可以把这行代码注释了
2、搭建vue过程
通过@vue/cli脚手架完成前端的搭建，端口号是8081~~
安装@vue/cli，vue脚手架3
npm i @vue/cli
//可查看版本
@vue/cli -V
//创建项目
vue create 项目名
好啦~前后端的demo都已经完成了，那么现在要做的就是连接数据库，以及前端如何调用接口问题。这也是项目当中比较难的地方。
3、连接数据库的问题
（1）操作数据库
（2）下载数据库
（3） 安装navicat，用navicat操作管理数据库，点击连接,添加连接名(可随意)
连接数据库 填写数据库的ip以及用户名以及密码点击连接测试,连接成功可点确定。
（4）连接数据库，nodejs操作数据库写接口在项目中安装好mysql数据库驱动。
下载第三方包 mysql(相当于驱动包,依赖模块)
npm i mysql --save(项目依赖)
注意:安装mysql时最好是先cd到项目文件夹下，如果不这样的话必须全局安装，为避免无法找到mysql模块，还是在项目文件夹下安装较为保险。
//连接数据库的代码，新建sql文件夹，新建db.js文件
测试版本的连接数据库代码：
因为开发每一个接口都需要连接数据库，那么上面的代码就得在每个接口写一遍，为了不让代码冗余，进行封装。
let mysql=require('mysql');
module.exports=(option={},sql,callback)=>{
let host=option.host||'99.47.133.165'; //数据库所在的服务器的ip地址
let user=option.user||'root'; //用户名
let password=option.password||'3edc$RFV5tgb'; //密码
let database=option.database ||null //你的数据库名
let db=mysql.createConnection({
host:host,
user:user,
password:password,
database:database
}); //创建连接
if(!(typeof sql=='string')){
return ;
};
db.connect(); //打开连接
//数据库操作也是异步的
db.query(sql,(error,result)=>{
if(error){
console.log(error);
return;
}
callback(result);
})
//关闭连接
db.end();
}
前端提供一个页面：
<template>
<div class="login">
<div class="content">
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="账号" prop="age">
<el-input v-model.number="ruleForm.age"></el-input>
</el-form-item>
<el-form-item label="密码" prop="pass">
<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
<el-button @click="resetForm('ruleForm')">注册</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default{
name:'loginPage',
data(){
var checkAge = (rule, value, callback) => {
if (!value) {
return callback(new Error('年龄不能为空'));
}
setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error('请输入数字值'));
} else {
if (value < 18) {
callback(new Error('必须年满18岁'));
} else {
callback();
}
}
}, 1000);
};
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.ruleForm.pass) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
return {
ruleForm: {
pass: '',
age: ''
},
rules: {
pass: [
{ validator: validatePass2, trigger: 'blur' }
],
age: [
{ validator: checkAge, trigger: 'blur' }
]
}
};
},
methods:{
submitForm(){
this.$api.request({
methods:'get',
url:'/api/user/login',
// params:{
// age:this.ruleForm.age,
// password:this.ruleForm.password,
// }
}).then(res=>{
console.log(res)
}).catch(err=>{
console.log(err)
})
// axios.get('localhost:3000/user/login').then(res=>{
// console.log(res)
// })
},
resetForm(){},
}
}
</script>
<style lang="scss" scoped>
.login{
width: 100%;
height: 100%;
background: #ff14932e;
.content{
width: 400px;
height: 400px;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin:auto;
}
}
</style>
后台express框架的app.js文件代码以及route文件夹下的users.js的代码
//在app.js写入如下代码行
app.use('/api/user/login', usersRouter); //路由导向
//在文件route->users.js处理路由
var express = require('express');
var router = express.Router();
var db=require('../sql/db.js');
router.get('/', function(req, res, next) {
console.log('dsdhh'); //如果调用成功就会打印
res.send();
});
module.exports = router;
前端通过请求调用接口，后台打印结果，说明数据调用成功。
其实在连调的这个过程当中，还真遇到坑
坑1、跨域问题
解决跨域问题：
后台做配置，在app.js入口文件写如下代码。一定要在路由导向之前写
app.all("*",(req,res,next)=>{
//设置允许跨域的域名，*代表允许任意域名跨域
res.header("Access-Control-Allow-Origin",'http://localhost:8081');//火狐，360本地开发需要具体写前端的端口看，这是一个坑。
res.header("Access-Control-Allow-Origin", "*");//谷歌浏览器写*就行
//允许的header类型
res.header("Access-Control-Allow-Headers", "X-Requested-With,Content-Type");Content-Type不加
//跨域允许的请求方式
res.header("Access-Control-Allow-Methods","DELETE,PUT,POST,GET,OPTIONS");
res.header("X-Powered-By","Express");
res.header("Content-Type","application/json;charset=utf-8");
res.header("Access-Control-Allow-Credentials",true)
// if (req.method.toLowerCase() == 'options')
// res.send(200); //让options尝试请求快速结束
// else
next();
})
坑2：
路由找不到，路由导向的path要和接口的path一致，但是在route文件夹下写接口是要重定向。代码如下：
var express = require('express');
var router = express.Router();
var db=require('../sql/db.js');
router.get('/', function(req, res, next) {
console.log('dsdhh');
res.send();
});
module.exports = router;