1,建立项目文件夹nodevue,文件内建立server文件夹
2,进入server此次执行以下命令搭建express
npm install express --save
npm install body-parser --save
npm install cookie-parser --save
npm install multer --save
npm list express 查看安装版本以及目录
3,服务器端形成此目录
后台目录以及文件建立成功后运行node app.js运行后台服务 : http://127.0.0.1:8899
app.js如下:
// 快速搭建网站后台的模块
const express = require("express"),
app = express();
const bodyParser = require("body-parser");
const sql = require('./mysql');
var resu={
code:2,
msg:'',
data:[]
}
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended:false}));
app.use("*",(req,res,next)=>{
res.header("Access-Control-Allow-Origin","*");
next()
})
app.get('/bill/info',(req,res)=>{
sql("select * from billcon",(err,result)=>{
if(result!=""){
resu.code=0
resu.msg='success'
resu.data=result
}else{
resu.code=-1
resu.msg='empty'
resu.data=result
}
res.send(resu)
})
})
app.post('/user/login', (req,res)=>{
let nickname = req.body['nickname'],
phone = req.body['phone'],
pwd =req.body['password'];
sql('select * from billuser where nickname="'+nickname+'" or phone="'+phone+'"',(err,result)=>{
if(result!=""){
if(result[0].password==pwd){
resu.code=0
resu.msg="success"
resu.data=result
}else{
resu.code=-1
resu.msg="wrongpwd"
resu.data=[]
}
}else{
resu.code=-1
resu.msg="nouser"
resu.data=[]
}
res.send(resu)
})
//sql(`insert into user (id,name) values ('${id}','${name}')`,(err,result)=>{
// if(err){
// res.send({code:0})
// } else{
// res.send({code:1})
//}
})
app.listen(8899,function () {
var host = this.address().address
var port = this.address().port
console.log("应用实例,访问地址为 http://%s:%s", host, port)
})//端口号
mysql.js中的内容如下:
const mysql = require("mysql");
function fn(sql,callback) {
var conf = mysql.createConnection({
//数据库的地址
host:"localhost",
//数据库的地址
user:"root",
//数据库密码(本地的为空,没有密码)
password:"",
//数据库端口
port:"3306",
//使用哪个数据库
database:"bill"
});
// 连接信息保存起来
// 开始连接
conf.connect();
// 执行我们的数据库操作
//con.query("数据库语句","传递的值","回调函数");
//查询数据库user里面的信息
conf.query(sql, (err,result) =>{
callback(err,result)
});
conf.end();
}
//模块的导入和导出
module.exports = fn;
4,客户端使用vue-cli,整理完server重新进入nodevue进行如下操作
//vue-cli建立客户端并运行
vue init webpack vueclient
cd vueclient
npm run dev
形成目录如下:(项目中使用到的vuex,axios,layer,vue-router自行github上了解内容进行下载)
在config--->index.js中修改(proxyTable)代理进行后台服务器的访问,以下为部分代码:
module.exports = {
dev: {
// Paths 该部分设置
//env:require('./dev.env'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target:'http://192.168.1.105:8899',
changeOrigin:true,
pathRewrite: {
'^/api': ''
}
}
},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8088, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
在组件中运用axios进行后台访问j简单封装api接口(src新建axios(含有axios.js和fetch.js)):
axios.js(在其中设置拦截)内容如下:
/**
* Created by mingyue.yang on 2018/6/14.
*/
import axios from 'axios'
import Vue from 'vue'
import router from '../router'
// 设置请求发送cookie, 默认是false, 不发送
axios.defaults.withCredentials = true;
// // 添加请求拦截器
// axios.interceptors.request.use(config => {
// let loading = Loading.service({
// fullscreen: true,
// text: '拼命加载中...'
// });
// return config
// }, err => {
// // 对请求错误做些什么
// console.log("发送失败");
// let loading = Loading.service({});
// loading.close(); //关闭加载前,记得重新定义实例
// return Promise.reject(err)
// });
// 添加响应拦截器
axios.interceptors.response.use(res => {
// let loading = Loading.service({});
// loading.close();
// 未登录的情况
//if (res.message === 'you have not logged in yet') {
// store.commit('logout');
// router.push({
// path: '/home',
// query: {redirect: router.currentRoute.fullPath}
// });
// return Promise.reject({message: "未授权,请登录"});
//}
// 错误,非正常返回
//if (res.data.status != 1) {
// return Promise.reject({message: res.data.info});
//}
return res;
}, err => {
if (err && err.response) {
switch (err.response.status) {
case 404:
err.message = '未找到指定文件!';
break;
case 403:
sessionStorage.removeItem('user');
router.push({
path: '/login',
query: {redirect: router.currentRoute.fullPath}
});
err.message = '未授权,请登录';
break;
default:
err.message = '获取失败!';
}
}
return Promise.reject(err);
});
axios.install = (Vue) => {
Vue.prototype.$axios = axios;
}
export default axios;
fetch.js中写请求函数:
/**
* Created by mingyue.yang on 2018/7/3.
*/
import axios from './axios'
import Vue from 'vue'
import qs from 'qs'
export default async(url = '', data = {}, type = 'GET', headers) => {
type = type.toUpperCase();
if (type == 'GET') {
if (Object.keys(data).length !== 0) {
url = url + '?' + qs.stringify(data);
}
}
let requestConfig = {
method: type,
headers: headers || {
'Content-Type': 'application/x-www-form-urlencoded'
}
}
if (type == 'POST') {
requestConfig.data = qs.stringify(data);
}
const response = await axios(url, requestConfig);
if (response) {
return response.data;
}
}
同时对所要请求的spi统一到一个js中:
import fetch from '../../axios/fetch'
// 登录相关
export const login = (userInfo) => fetch('/api/user/login', userInfo, 'post');
//接口尝试
export const getbillinfo = () => fetch('/api/bill/info','', 'get');
而后便可以在组建中请求使用接口函数进行请求(vue登录页面的部分内容截取):
</template>
<script>
import {login} from '../assets/js/api'
export default {
data(){
return {
username:"",
pwd:""
}
},
methods:{
billlogin:function(){
if(this.username==""){
this.$layer.alert("用户名不能为空")
return
}else if(this.pwd==""){
this.$layer.alert("密码不能为空")
return
}else{
var data={
nickname:this.username,
phone:this.username,
password:this.pwd
}
}
login(data).then((res)=>{
console.log(res)
if(res.code==0){
this.$router.replace('/')
}else{
if(res.msg=="wrongpwd"){
this.$layer.alert("密码错误,请重新输入")
}else if(res.msg='nouser'){
this.$layer.alert("用户不存在,请输入正确账号")
}
}
})
}
}
}
</script>
<style lang="stylus">
至此客户端页面基本可以了,运行npm run dev即可进行后续的开发