node+mysql+vue+express项目搭建

第一步:项目建设前需要安装node环境和MySQL数据库。

以下操作已完成：

npm install @vue/cli -g (-g 代表全局安装)

初始化项目 vue create projectName (项目名) (省略检测安装是否成功)

根据自己的需要选择剩余的配置

第二步:在项目根目录下建立一个新的后端目录

a、server文件夹

b、在server文件夹下新建api文件夹、db.js、index.js、sqlMap.js。

c、db.js (配置相关数据库)

module.exports = {

mysql: {

host: 'localhost',

user: 'root',

password: 'root',

database: 'login',

port: '3306'

}

}

d、index.js (配置后端端口和api路由)

const userApi = require('./api/userApi')

const bodyParser = require('body-parser')

const express = require('express')

const app = express()

app.use(bodyParser.urlencoded({ extended: true }))

app.use(bodyParser.json())

// 后端api路由

app.use('/api/user', userApi)

// 监听端口

app.listen(3000)

console.log('success listen at port:3000...')

e、sqlMap.js (sql语句，因为博主是前端，所以对于sql句子的编写不是很好)

var sqlMap = {

// 用户

user: {

add: 'insert into user(username, password) values(?, ?)',

selectUser: 'select * from user WHERE username = ? AND password = ? '

}

}

module.exports = sqlMap

f、userApi.js

var models = require('../db')

var express = require('express')

var router = express.Router()

var mysql = require('mysql')

var $sql = require('../sqlMap')

// 连接数据库

var conn = mysql.createConnection(models.mysql)

conn.connect()

var jsonWrite = function (res, ret) {

if (typeof ret === 'undefined') {

res.json({

code: '1',

msg: 操作失败

})

} else {

res.json(ret)

}

}

// 增加用户界面

router.post('/addUser', (req, res) => {

let sql = $sql.user.add

let params = req.body

conn.query(sql, [params.username, params.password], function (err, result) {

if (err) {

console.log添加失败 err)

}

if (result) {

jsonWrite(res, result)

}

})

})

// 查询用户信息

router.post('/selectUser', (req, res) => {

let sql = $sql.user.selectUser

let params = req.body

if (params.username) {

sql = "select * from user where username = '" params.username "' AND password = '" params.password "'"

}

console.log(sql)

conn.query(sql, [params.username, params.password], function (err, result) {

console.log(err)

console.log(result)

if (err) {

jsonWrite(err)

}

if (result) {

jsonWrite(res, result)

}

})

})

module.exports = router

g、主页页面

export default {

data () {

const checkUsename = (rule, value, callback) => {

if (!value) {

return callback(new Error(用户名不能为空)

/* eslint-disabl */

} else if (!(/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/).test(value)) {

// eslint-disable-next-line

return callback(new Error('用户名格式不正确'))

} else {

callback()

}

}

const validatePass = (rule, value, callback) => {

if (!value) {

callback(new Error('请输入密码'))

} else if (value.length < 5) {

callback(new Error('密码不能少于5位'))

} else {

callback()

}

}

const validatePass1 = (rule, value, callback) => {

if (!value) {

callback(new Error('请再次输入密码'))

} else if (value.length < 5) {

callback(new Error('密码不能少于5位'))

} else if (value !== this.ruleForm.password) {

callback(new Error('前后密码不一致'))

} else {

callback()

}

}

return {

ruleForm: {

username: '',

password: '',

password1: ''

},

rules: {

username: [

{ validator: checkUsename, trigger: 'blur' }

],

password: [

{ validator: validatePass, trigger: 'blur' }

],

password1: [

{ validator: validatePass1, trigger: 'blur' }

]

}

}

},

methods: {

// 注册提交

submitForm (formname) {

const _vm = this

_vm.$refs[formname].validate((valid) => {

if (valid) {

_vm.$axios.post('/api/user/addUser', {

username: _vm.ruleForm.username,

password: _vm.ruleForm.password1

}).then((res) => {

console.log(res)

if (res.status === 200 && res.data.serverStatus === 2) {

_vm.$message({

message: '注册成功!',

type: 'success'

})

_vm.$refs[formname].resetFields()

} else {

_vm.$message({

message: '注册失败!',

type: 'error'

})

}

})

} else {

return false

}

})

}

}

}

.demo_ruleForm {

width: 50%;

margin: 20% auto;

}

.demo_ruleForm {

text-align: center;

}

.demo_ruleForm .title span {

font-size: 30px;

}

.submit_btn {

width: 100%;

}

h、测试

i、数据库

这样我们就完成了一个简单的前端后台一起的项目了。欢迎深入了解。

express&plus;mysql&plus;vue开发环境搭建

最近开始做一个实验室资产管理系统,后台使用node.js的Express框架,前端使用vue,数据库使用mysql.在这里开始简单记录一下开发过程和遇到的问题. 今天要说的是express+mysql ...

Vue的项目搭建及请求生命周期

目录 Vue的项目搭建及请求生命周期 Vue-CLI的项目搭建 环境搭建 项目创建 pycharm运行Vue项目 Vue项目的大体结构 Vue的请求生命周期 两个小用法 Vue的项目搭建及请求生命周期 ...

Node&period;js Express项目搭建

讲干货,不啰嗦,Express 是一个简洁而灵活的 node.js Web应用框架,使用 Express 可以快速地搭建一个完整功能的网站.本教程介绍如何从零开始搭建Express项目. 开发环境:w ...

VUE 脚手架项目搭建

1. 概述 1.1 说明 vue-cli是一个官方发布vue.js项目脚手架,使用vue-cli可以快速创建vue项目.GitHub地址是:https://github.com/vuejs/vue-c ...

(转)windows环境vue&plus;webpack项目搭建

首先,vue.js是一种前端框架,一般利用vue创建项目是要搭配webpack项目构建工具的,而webpack在执行打包压缩的时候是依赖node.js的环境的,所以,要进行vue项目的开发,我们首先要 ...

node&period;js vue开发环境搭建

开发工具安装 1.安装node.js 双击安装程序 node-v8.9.3-x64.msi,进行安装即可 2.设置taobao镜像 npm config set registry https://re ...

Node&period;js基于Express框架搭建一个简单的注册登录Web功能

这个小应用使用到了node.js  bootstrap  express  以及数据库的操作 :使用mongoose对象模型来操作 mongodb 如果没了解过的可以先去基本了解一下相关概念~ 首先注 ...

Vue之项目搭建

一.Vue自动化工具的安装 nvm:nodejs 版本管理工具. 也就是说:一个 nvm 可以管理很多 node 版本和 npm 版本. nodejs:在项目开发时的所需要的代码库 npm:nodej ...

开启第一个Node&period;js的Express项目

手动创建一个Express.js的应用可大致分为以下步骤: 1.创建文件夹 a. 创建一个项目根文件夹,如helloWord b.在项目的根目录下创建项目的目录结构,依次创建{public,publi ...

随机推荐

【腾讯Bugly干货分享】聊聊苹果的Bug - iOS 10 nano&lowbar;free Crash