使用nuxt,express,mysql,nginx创建个人博客系列-04
171
2020-01-24 18:37
1 年前
mac安装mysql(两种方法)
- 使用homebrew
brew install mysql
- 使用安装包(mysql地址)mysql安装包地址
如果安装不成功,我这里提供一篇别人的安装教程简书教程
window安装mysql
- Window上安装Mysql相对来说会较为简单,你只需要在 MySQL 下载中下载window版本的mysql安装包,并解压安装包。双击 setup.exe 文件,接下来你只需要安装默认的配置点击"next"即可,默认情况下安装信息会在C:\mysql目录中。
(tips:安装mysql这个环节一笔带过了,因为这方面的知识有很多,大家自行搜索和摸索)
下面我来讲一下如何使用node链接mysql,其实这个东西随便网上找一下一大片,我就随便讲讲如何使用操作mysql吧。
首先你需要安装mysql模块(npm install mysql)mysql github 地址 安装body-parser模块(npm install body-parset)body-parser github 地址
进入之前blog项目,找到server/api目录,在此目录下创建test.js,再在page目录下创建个test目录并且在里面创建个index.vue,我会在这里讲解一下mysql操作,首先我们创建一个数据库,然后创建一个user表用来测试
mysql -u 用户名 -p (回车)
Enter password
只要用户名和密码正确就能进入,
创建test数据库
create database test;
选择test数据库
use test;
创建user 表
CREATE TABLE `user` (
`id` int(11) unsigned NOT NULL AUTO_INCREMENT,
`name` varchar(64) NOT NULL DEFAULT '',
`sex` enum('1','2') NOT NULL DEFAULT '1' COMMENT '1男,2女',
`height` int(11) NOT NULL DEFAULT '0',
`weight` int(11) NOT NULL DEFAULT '0',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
这里是server/index.js,添加以下内容
import bodyParser from 'body-parser' // 引入body-parser模块处理请求,
let jsonParser = bodyParser.json({
limit: '50mb'
})
let urlPaser = bodyParser.urlencoded({
extended: true,
limit: '50mb'
})
// Import API Routes
app.use('/api',jsonParser,urlPaser, api)
这里是page/test/index.vue代码
<template>
<div>
<h1>列表</h1>
<ul>
<li v-for="(item,index) in data.user_list" :key="index">
{{item}}
</li>
</ul>
<h2>插入</h2>
<div>
<input type="text" v-model="name" placeholder="姓名">
<br/>
男<input type="radio" value="1" v-model="sex">
女<input type="radio" value="2" v-model="sex">
<br/>
<input type="text" v-model="height" placeholder="身高">
<br/>
<input type="text" v-model="weight" placeholder="体重">
<br/>
<div @click="test">插入</div>
</div>
</div>
</template>
<script>
import axios from '~/plugins/axios'
export default {
asyncData(){
return axios.get('/api/test').then((res)=>{
return {data:res.data}
}).catch((e) => {
error({ statusCode: 404, message: 'Test not found' })
})
},
data(){
return {
name:"",
height:0,
weight:0,
sex:1,
}
},
methods:{
test(){
let {name,height,weight,sex} = this;
axios.post('/api/test/createUser',{
name,
height,
weight,
sex
}).then(resp=>{
if(resp.data.status==1){
window.location.reload();
}
})
}
}
}
</script>
这里是server/api/index.js,
import { Router } from 'express'
import users from './users'
import test from './test'
const router = Router()
// Add USERS Routes
router.use(users)
router.use('/test',test)
export default router
这里是server/api/test.js,
import { Router } from 'express'
import mysql from 'mysql'
const router = Router()
router.get('/', (req,res,next)=>{
let connection = mysql.createConnection({
host : 'localhost',
user : 'root',
password : '',
port: '3306',
database: 'test',
});
connection.connect();
connection.query('select * from user',function(error, results, fields){
if (error) throw error;
return res.send({
user_list:results
})
});
connection.end();
})
router.post('/createUser',(req,res,next)=>{
let {body} = req;
let connection = mysql.createConnection({
host : 'localhost',
user : 'root',
password : '',
port: '3306',
database: 'test',
});
connection.connect();
connection.query('insert into user set ?',body,function(error,results,fields){
if (error) throw error;
if(results.affectedRows === 1){
return res.send({
status:1
})
}else{
return res.send({
status:0,
msg:"插入失败"
})
}
})
connection.end();
})
export default router
打开浏览器http://127.0.0.1:3002/test即可看到以下页面
上一篇-使用nuxt,express,mysql,nginx创建个人博客系列-03
下一篇-使用nuxt,express,mysql,nginx创建个人博客系列-05