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 = `
<ul>
<li><a href="/page/helloworld">/view/helloworld</a></li>
<li><a href="/page/404">/view/404</a></li>
   <li><a href="/page/delete">/view/delete</a></li>
</ul>
`

//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()
})
}
})
})
}

module.exports = { query,insertData,findUserData,deleteUserData,updateUserData,selectAllData,selectOne }

-----vue2.html----

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue first demo</title>
       <style>
       .pagination {
       width:200px;
       height:50px;
       background-color:gray;
       display: block;;
       }
       .active{
       background-color:green;
       }
       </style>
</head>

<body>

       

       v-model指令<br>
       v-if指令 v-else-if 指令 v-if="expression"<br>
       v-show指令 v-show也是条件渲染指令，和v-if指令不同的是，使用v-show指令的元素始终会被渲染到HTML，它只是简单地为元素设置CSS的style属性<br>
       v-else指令可以用v-else指令为v-if或v-show添加一个“else块”。v-else元素必须立即跟在v-if或v-show元素的后面——否则它不能被识别<br>
       v-for指令<br>
       v-bind指令
       v-bind指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），例如：v-bind:class
           v-bind:argument="expression"
       <br>
       v-on指令
       v-on指令用于给监听DOM事件，它的用语法和v-bind是类似的
       <br>

       v-text 指令更新元素的 textContent。如果要更新部分的 textContent ，需要使用 {{ Mustache }} 插值。

       <br>
       v-html指令
       <br>
       
               v-bind和v-on的缩写
       Vue.js为最常用的两个指令v-bind和v-on提供了缩写方式。v-bind指令可以缩写为一个冒号，v-on指令可以缩写为@符号。

<a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? 'active' : ''">{{ n + 1 }}</a>
       
       <a href="javascripit:void(0)" :class="activeNumber=== n + 1 ? 'active' : ''">{{ n + 1 }}</a>

<button v-on:click="greet">Greet</button>
       
       <button @click="greet">Greet</button>


       

<div id="app">
       <br>
           <p v-text="bitcoinprice"> </p>
           <p>bitcoin : {{bitcoinprice}} </p>

       <div v-html="html"></div>

       <span v-text="msg"></span>
       <p v-text="message"> </p>
           <br>
<p>{{ message }}</p>
           <input type="text" v-model="message"/>

           <h1>Hello, Vue.js!</h1>
<h1 v-if="yes">Yes!</h1>
<h1 v-if="no">No!</h1>
<h1 v-if="age >= 25">Age: {{ age }}</h1>
           <h1 v-else>Age is : {{ young }}</h1>
           age:<input type="text" v-model="age"/>
<h1 v-if="name.indexOf('jack') >= 0">Name: {{ name }}</h1>



           <h1>Hello, Vue.js!</h1>
<h1 v-show="yes">Yes!</h1>
<h1 v-show="no">No!</h1>
<h1 v-show="age >= 25">Age: {{ age }}</h1>
<h1 v-show="name.indexOf('jack') >= 0">Name: {{ name }}</h1>



           <table>
<thead>
<tr>
<th>Id</th>
<th>name</th>
<th>age</th>
                       <th>address</th>
                       <th>salary</th>
</tr>
</thead>
<tbody>
<tr v-for="person in people">
<td>{{ person.id }}</td>
<td>{{ person.name }}</td>
<td>{{ person.age }}</td>
                       <td>{{ person.address }}</td>
                       <td>{{ person.salary }}</td>
</tr>
</tbody>
</table>



           <ul class="pagination">
<li v-for="n in pageCount">
<a href="javascripit:void(0)" v-bind:class="activeNumber === n ? 'active' : ''">{{ n }}</a>
</li>
</ul>






       <p>

<button v-on:click="greet">Greet</button>
</p>
<p>

<button v-on:click="say('Hi')">Hi</button>
</p>


           <img v-bind:src="data:imageSrc">
           <img :src="data:imageSrc">


           本场比赛得分：{{count}} <br>
<button @click="jiafen">加分</button>
<button @click="jianfen">减分</button> <br>
       </div>


</body>

   <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
// 这是我们的Model
var exampleData = {
message: 'Hello World!',
           yes: false,
no: false,
age: 28,
name: 'keepfool'
}

// 创建一个 Vue 实例或 "ViewModel"
// 它连接 View 与 Model
var vue= new Vue({

el: '#app',
data: {
           bitcoinprice: "",
           count:0,
　　　　　　funshu2:0,
           html:'<p> html!</p>',
           imageSrc:' C:\\Users\\Public\\Pictures\\Sample Pictures\\Penguins000.jpg',
           msg:'ABCDEF',
           message: 'Hello World!',
           yes: true,
no: false,
age: 24,
name: 'keepfool',young:"young!",

           people: [],
               activeNumber: 1,
pageCount: 10
           },
           // 在 `methods` 对象中定义方法
methods: {
greet: function() {
// // 方法内 `this` 指向 vm
alert(this.message)
                   alert(this.age)
},
say: function(msg) {
alert(msg)
},
               jiafen:function(){
this.count++;
},
jianfen:function(){
this.count--;
},
},
           mounted () {
           //response.data.bpi
               axios.get('http://localhost:3000/')
               .then((response) => {
               vue.bitcoinprice = response.data
               //vue.message=response.data.bpi.EUR.description
               alert(response.data)
               }).catch(error => {
                           console.log(error)
                           this.errored = true
                       })
                       .finally(() => this.loading = false)


               axios.get('http://localhost:3000//all')
               .then((response) => {
               vue.people = response.data
               //vue.message=response.data.bpi.EUR.description
               alert(response.data)
               }).catch(error => {
                           console.log(error)
                           this.errored = true
                       })
                       .finally(() => this.loading = false)
           }
})
</script>
</html>

-------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 |
+----+-------------+-----+----------------------------------------------------+----------+

vue2 通过 axios 访问koa2,从mysql 拿到数据更新vue2中的内容相关推荐

koa连接mysql_CentOS 环境 Node + Koa2 连接 MySQL （ECS系列三）
Koa 搭建服务新建一个文件夹 koa_server,进入后 cnpm i -S koa 会生成 node_modules 依赖包,以及 package.json 创建文件 server.js,并写 ...
解决Docker容器内访问宿主机MySQL数据库服务器的问题
解决Docker容器内访问宿主机MySQL数据库服务器的问题参考文章: (1)解决Docker容器内访问宿主机MySQL数据库服务器的问题 (2)https://www.cnblogs.com/ga ...
vue中比较完美请求的栗子（使用 axios 访问 API）
vue中比较完美请求的栗子(使用 axios 访问 API) 官网地址:https://vuejs.bootcss.com/v2/cookbook/using-axios-to-consume-api ...
mycat配置访问oracle_教程 | MySql都会了，确定不学习一下MyCat分片？
什么是MyCat 官方网站::http://www.mycat.org.cn/ http://www.mycat.io/ db proxy MycatMyCat 架构 MyCat 核心概念Schema ...
Windows下访问VirtualBox的mysql服务
由于好长时间没有在windows下使用mysql,现在出现好多选项,而且使用sqlyog连接总是出现1045错误,所以在虚拟机Ubuntu下安装mysql进行访问,但是想用win下面vscode进行开 ...
mysql+跨服务器+写入_MySQL中使用FREDATED引擎实现跨数据库服务器、跨实例访问
跨数据库服务器,跨实例访问是比较常见的一种访问方式,在Oracle中可以通过DB LINK的方式来实现.对于MySQL而言,有一个FEDERATED存储引擎与之相对应.同样也是通过创建一个链接方式的形 ...
c 连接mysql数据库查询_C语言实现访问及查询MySQL数据库的方法
本文实例讲述了C语言实现访问及查询MySQL数据库的方法.分享给大家供大家参考,具体如下: 1.添加头文件路径(MySQL安装路径中的include路径) 2.添加库文件(直接从MySQL安装路径中c ...
nodejs进入mysql数据库_nodejs简单访问及操作mysql数据库的方法示例
本文实例讲述了nodejs简单访问及操作mysql数据库的方法.分享给大家供大家参考,具体如下: var mysql = require('mysql'); //调用MySQL模块 mysql模块要安 ...
vue中axios访问Java后端跨域问题解决
vue中axios访问Java后端跨域问题解决参考文章: (1)vue中axios访问Java后端跨域问题解决 (2)https://www.cnblogs.com/soinve/p/9295009 ...

vue2 通过 axios 访问koa2,从mysql 拿到数据更新vue2中的内容

vue2 通过 axios 访问koa2,从mysql 拿到数据更新vue2中的内容相关推荐

最新文章

热门文章