vue2 通过 axios 访问koa2,从mysql 拿到数据更新vue2中的内容
vue2 通过 axios 访问koa2,从mysql 拿到数据更新vue2中的内容
axios 类似ajax
注意红色字体
node --inspect index.js （启用debug模式）
node index.js （正常模式）
------index.js----
const Koa = require('koa')
const app = new Koa()
const views = require('koa-views')
const path = require('path')
// 加载模板引擎
app.use(views(path.join(__dirname, './view'), {
extension: 'ejs'
//换成这个之后，可以在html中用ejs的语法， map : {html:'ejs'}
}))
const Router = require('koa-router')
let home = new Router()
// mysql access [1]
const dbprocess = require('./async-db')
const cors = require('koa2-cors');
app.use(cors({
exposeHeaders: ['WWW-Authenticate', 'Server-Authorization', 'Date'],
maxAge: 100,
credentials: true,
allowMethods: ['GET', 'POST', 'OPTIONS'],
allowHeaders: ['Content-Type', 'Authorization', 'Accept', 'X-Custom-Header', 'anonymous'],
}));
// 子路由1
home.get('/', async ( ctx )=>{
let html = `
`
//ctx.body = html
let xxx={name:'abc',age:30,address:'xi\'an'}
ctx.body=xxx
}).get('/all', async ( ctx )=>{
let peoples= await dbprocess.selectAllData()
.then(m => {
console.log("~~~ get all data");
return m
})
ctx.body=peoples
})
// 子路由2
let page = new Router()
page.get('/404', async ( ctx )=>{
ctx.body = '404 page!'
}).get('/helloworld', async ( ctx )=>{
/*
//单条查询
let res,title='abc',
id ,
name ,
age ,
address ,
salary ;
await dbprocess.findUserData([1])
.then(x => {
res=x
//console.log(res[0])
})
await ctx.render('userejs', {
title,
id:res[0]['id'],
name:res[0]['name'],
age:res[0]['age'],
address:res[0]['address'],
salary:res[0]['salary']
})
*/
// 多条查询
let alluser,allusers,title;
allusers=await selectAllData()
console.log(allusers)
await ctx.render('userejs', {
title:12345,
id:1,
name:2,
age:3,
address:4,
salary:5,
alluser:allusers
})
}).get('/delete', async ( ctx )=>{
//http://localhost:3000/page/delete?id=2
let ctx_query = ctx.query
let ctx_querystring = ctx.querystring
let ar=ctx_querystring.split("=")
if(ar[0]==='id'){
//ctx.body=ar[1]
await dbprocess.deleteUserData(ar[1])
.then(z => {
res=z
console.log(ar[1]+" is deleted. ")
ctx.body=ar[1]+" is deleted. "
})
}else{
ctx.body = ctx_querystring
}
}).get('/update', async ( ctx )=>{
//http://localhost:3000/page/update?id=2&salary=5000
let ctx_query = ctx.query
let ctx_querystring = ctx.querystring
let ar=ctx_querystring.split("=")
// ctx.params.id
if(ar[0]==='id'){
//ctx.body=ar[2]
console.log(ar[2]+" ||||||| "+ar[1].split("&")[0])
await dbprocess.updateUserData([ar[2],ar[1].split("&")[0]])
.then(m => {
console.log(ar[1].split("&")[0]+" update ok . ")
ctx.body=ar[1].split("&")[0]+" update ok . "
})
}else{
ctx.body = ctx_querystring
}
}).get('/tovue', async ( ctx )=>{
//http://localhost:3000/page/tovue
//ctx.body = ctx_querystring
let listpeople= [{
name: 'Jack',
age: 30,
sex: 'Male'
}, {
name: 'Bill',
age: 26,
sex: 'Male'
}, {
name: 'Tracy',
age: 22,
sex: 'Female'
}, {
name: 'Chris',
age: 36,
sex: 'Male'
}];
let people
await ctx.render('example', {
people:listpeople
})
})
// 装载所有子路由
let router = new Router()
router.use('/', home.routes(), home.allowedMethods())
router.use('/page', page.routes(), page.allowedMethods())
// 加载路由中间件
app.use(router.routes()).use(router.allowedMethods())
app.listen(3000, () => {
console.log('[demo] route-use-middleware is starting at port 3000')
})
-------async-db.js----是个辅助类配置连接数据库------
const mysql = require('mysql')
const pool = mysql.createPool({
host : '127.0.0.1',
user : 'root',
password : 'admin',
database : 'abc'
})
let query = function( sql, values ) {
return new Promise(( resolve, reject ) => {
pool.getConnection(function(err, connection) {
if (err) {
reject( err )
} else {
connection.query(sql, values, ( err, rows) => {
if ( err ) {
reject( err )
} else {
resolve( rows )
}
connection.release()
})
}
})
})
}
let insertData = function( value ) {
let _sql = "insert into company set id=?,name=?,age=?,address=?,salary=?;"
return query( _sql, value )
}
let deleteUserData = function( id ) {
let _sql = `delete from company where id="${id}";`
return query( _sql )
}
let findUserData = function( id ) {
let _sql = `select * from company where id="${id}";`
return query( _sql )
}
let updateUserData = function( value ) {
let _sql = "update company set salary=? where id=?"
return query( _sql, value )
}
let selectAllData = function( value ) {
let _sql = 'SELECT * FROM company'
return query( _sql, value )
}
let selectOne = function( id ) {
let _sql = 'SELECT * FROM company where id="${id}";'
return query( _sql, value )
}
module.exports = { query,insertData,findUserData,deleteUserData,updateUserData,selectAllData,selectOne }
-----vue2.html----
v-model指令
v-if指令 v-else-if 指令 v-if="expression"
v-show指令 v-show也是条件渲染指令，和v-if指令不同的是，使用v-show指令的元素始终会被渲染到HTML，它只是简单地为元素设置CSS的style属性
v-else指令 可以用v-else指令为v-if或v-show添加一个“else块”。v-else元素必须立即跟在v-if或v-show元素的后面——否则它不能被识别
v-for指令
v-bind指令
v-bind指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），例如：v-bind:class
v-bind:argument="expression"
v-on指令
v-on指令用于给监听DOM事件，它的用语法和v-bind是类似的
v-text 指令更新元素的 textContent。如果要更新部分的 textContent ，需要使用 {{ Mustache }} 插值。
v-html指令
v-bind和v-on的缩写
Vue.js为最常用的两个指令v-bind和v-on提供了缩写方式。v-bind指令可以缩写为一个冒号，v-on指令可以缩写为@符号。
bitcoin : {{bitcoinprice}}
{{ message }}
Hello, Vue.js!
Yes!
No!
Age: {{ age }}
Age is : {{ young }}
age:
Name: {{ name }}
Hello, Vue.js!
Yes!
No!
Age: {{ age }}
Name: {{ name }}
| Id | name | age | address | salary |
|---|---|---|---|---|
| {{ person.id }} | {{ person.name }} | {{ person.age }} | {{ person.address }} | {{ person.salary }} |
本场比赛得分：{{count}}
-------table----
+----+-------------+-----+----------------------------------------------------+----------+
| id | name | age | address | salary |
+----+-------------+-----+----------------------------------------------------+----------+
| 3 | Teddy | 23 | Norway | 5000 |
| 4 | Mark | 25 | Rich-Mond | 5000 |
| 5 | huaer | 30 | XI'AN | 50 |
| 7 | huaerduoduo | 30 | xian | 50 |
| 8 | koa2 | 879 | weast our | 77777800 |
+----+-------------+-----+----------------------------------------------------+----------+
mysql> desc company;
+---------+-------------+------+-----+---------+-------+
| Field | Type | Null | Key | Default | Extra |
+---------+-------------+------+-----+---------+-------+
| id | int(10) | NO | PRI | NULL | |
| name | varchar(20) | NO | | NULL | |
| age | int(10) | NO | | NULL | |
| address | varchar(50) | YES | | NULL | |
| salary | float | YES | | NULL | |
+---------+-------------+------+-----+---------+-------+
5 rows in set (0.45 sec)