Express: 基于 Node.js 平台,快速、开放、极简的 web 开发框架。
说明
安装:
npm install express
搭建 Express 详细步骤:
const express = require('express');
const bodyParser = require('body-parser')
const app = express();
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())
app.all('/*',(req,res,next)=>{
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader("X-Powered-By",' 3.2.1')
res.setHeader("Content-Type", "application/json;charset=utf-8");
res.setHeader("Access-Control-Allow-Credentials", "true");
res.setHeader("Access-Control-Allow-Methods", "*");
res.setHeader("Access-Control-Allow-Headers", "Content-Type,Access-Token");
res.setHeader("Access-Control-Expose-Headers", "*");
next();
})
//3.路由处理
//GET登录请求处理
app.get('/api/login',(req,res)=>{
const result = {status:1,message:"登录成功"}
// /login?username=zhangsan&password=123
if (req.query.username=='zhangsan' && req.query.password=='123'){
}else{
result.status = 0;
result.message = "用户名或密码失败"
}
res.setHeader("Content-Type","text/json;charset=utf-8");
res.json(result);
})
//POST登录请求处理
app.post('/postLogin',(req,res)=>{
const result = {status:1,message:"登录成功"}
if (req.body.username=='lisi' && req.body.password=='lisi'){
}else{
result.status = 0;
result.message = "用户名或密码失败"
}
res.setHeader("Content-Type","text/json;charset=utf-8");
res.json(result);
})
//4.启动
app.listen(3000,"127.0.0.1", function(){
console.log("start success");
});
测试 Express
- 我用 vscode, 选择 server.js文件, 右键: 选择在终端中打开
- 通过如下命令启动此应用: node server.js
- 如果成功: 输出 start success
调用 服务器 演示两种
准备工作:
<script src="https://cdn.bootcss.com/vue/2.5.13/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.3.4/vue-resource.js"></script>
第一种: vue-resource
// html代码
<div id="app">
<button @click="jsonp()">发送JSONP请求</button>
</div>
使用 get 请求
<script>
Vue.use(VueResource)
const vm = new Vue({
el:'#app',
methods:{
getLogin(){
const url = "http://IP地址:3000/api/login?username=lisi&password=123"
this.$http.get(url).then(function(response){
console.log(response.body)
},function(err){
console.log(err)
})
}
}
})
</script>
使用 post 请求
<script>
const vm = new Vue({
el:'#app',
methods:{
postLogin(){
const url = "http://IP地址:3000/postLogin"
this.$http.post(url,{username:'lisi',password:'lisi'},{emulateJSON:true}).then(response=>{
console.log(response.body)
},err=>{
console.log(err)
})
}
}
})
</script>
使用 jsonp 跨域 请求
<script>
new Vue({
el:'#app',
methods: {
jsonp() {
const url ="https://api.douban.com/v2/movie/in_theaters";
this.$http.jsonp(url).then((response) => {
console.log(response.body);
}, (err) =>{
console.log(err)
})
}
}
})
</script>
第二种: axios
<script src="https://cdn.bootcss.com/vue/2.5.13/vue.js"></script>
<!-- 导入了之后,就相当于jQuery -->
<script src="https://cdn.bootcss.com/axios/0.17.1/axios.js"></script>
使用 get 请求
<script>
const vm = new Vue({
el:'#app',
methods:{
getLogin(){
const url = "http://IP地址:3000/api/login?username=zhangsan&password=123"
axios.get(url).then(response=>{
console.log(response.data)
},err=>{
console.log(err)
})
}
}
})
</script>
使用 post 请求
<script>
const vm = new Vue({
el:'#app',
methods:{
postLogin(){
const url = "http://IP地址:3000/postLogin"
axios.post(url,{username:'lisi',password:'lisi'}).then(response=>{
console.log(response.data)
},err=>{
console.log(err)
})
}
}
})
</script>
vue-resource 和 axios的 区别
1、vue-resource是基于vue的,只能在vue中使用
2、axios没有基于Vue,在其它框架中都可以使用
3、vue-resource支持jsonp,axios不支持
4、vue-resource不支持在node中使用,axios支持