精华内容
下载资源
问答
  • vue与后端交互
    2020-06-04 15:10:22

    vue-resource

    参考文章

    • 安装
    npm  install vue-resource  --save
    
    • main.js 入口文件中加入如下代码:
    /*引入资源请求插件*/
    import VueResource from 'vue-resource'
    /*使用VueResource插件*/
    Vue.use(VueResource)
    
    • 在项目中调用 this.$http.get()
    this.$http.get("static/data.json").then(res => {
       console.log(res);
       if (res.status === 200){
           this.list = res.data.data;
       }
    }).catch(err => {
       console.error(err)
    })
    

    Axios

    • 安装
    npm  install axios --save
    
    • 在 main.js 入口文件中加入如下代码:
    /*引入Axios*/
    import Axios from 'axios';
    /*在Vue原型链上绑定,就可以全局使用$axios方法*/
    Vue.prototype.$axios = Axios;
    
    • 在项目使用this.$axios.get()
    this.$axios.get("static/data.json").then(res => {
    	console.log(res);
        if (res.status === 200){
    		this.listOne = res.data.data;
       	}
    }).catch(err => {
         console.error(err)
    })
    
    

    注意事项:

    • 如果使用 vue-resource 和 Axios 请求的地址是本地文件, 文件的位置一定要放在static目录 下面,路径为static/data.json
    • vue-resource 和 Axios 区别
      aixos是每在一个页面用一次就要在该页面调用一次。vue-resource是绑定了全局的了
    更多相关内容
  • 本人对vue与后端数据交互不是很懂,搜索了很多关于vue与后端数据交互介绍,下面我来记录一下,有需要了解的朋友可参考。希望此文章对各位有所帮助。 必须引入一个库:vue-resource 1.获取普通文本数据 比如:a.txt: ...
  • 目录PromiseaxiosAxios语法格式Axios过滤器async-await用法Vue与后端交互案例 Promise ajax作为一种运用广泛异步请求方式,在特殊的业务逻辑时会出现某种问题。比如:ajax成功回调后调用另外一个ajax,这样的ajax将...

    Promise

    ajax作为一种运用广泛异步请求方式,在特殊的业务逻辑时会出现某种问题。比如:ajax成功回调后调用另外一个ajax,这样的ajax将会让逻辑十分复杂和混乱,而且一步出错,步步出错。

    • 而Promise则用另一种语法方式则可以解决这种ajax的嵌套问题。

    • 并且Promise对象提供了简洁的API 用法简单

    使用方法

    1.then 异步调用正确时返回
    2.catch 获取异常信息
    3.finally 成功与否都会执行的操作

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>promise调用API</title>
    	</head>
    	<body>
    		<div id="app">
    		</div>
    		<script>
                //resolve成功时回调的参数,reject失败时回调的参数
    			let promise = new Promise(function(resolve,reject){
    				let flag = true
    				if(flag){
    					resolve("业务执行成功")
    				}else {
    					reject("业务执行失败")
    				}
    			})
    			//通过then获取回调函数
    			promise.then(function(result){
    				//从resolve中获取数据
    				console.log(result)
    			})
    			.catch(function(data){
    				console.log(data)
    			})
    			.finally(function(){
    				console.log("最终都会执行")
    			})
    		</script>
    	</body>
    </html>
    

    axios

    使用axios的原理就是基于promise的,调用axios将返回一个Promise对象。可以解决ajax嵌套问题,用aixos来代替原生的ajax和jQeryAjax来执行异步请求在前后端项目中使用是一个很好的选择。

    • 它将原生的ajax的嵌套转换为链式结构,解决了传统的回调地狱。

    Axios语法格式

    前端代码

    <button>GET</button>
    <button>POST</button>
    <button>通用型方法ajax</button>
    <div id="result">
    </div>
    <script>
        const btnS = document.getElementsByTagName("button");
        btnS[0].addEventListener('click', function () {
            //get请求
            axios.get(
                //url路径
                'http://localhost:8080/axios',
                {
                    //url参数(get方法时使用)
                    params: {
                        id: 100,
                        vip: 7
                    },
                    //请求头信息
                    headers: {
                        name: 'lyj'
                    }
                }).then(value => {      //设置响应
                    console.log(value);
                    document.getElementById("result").innerHTML = value.data.message;
            });
        })
        btnS[1].addEventListener('click', function () {
            //post请求
            axios.post(
                //url路径
                'http://localhost:8080/axios',
                {
                    //请求体参数post方法携带参数
                    data: {
                        id: 'hello',
                        name: '张三'
                    },
                    //请求头信息
                    headers: {
                        name: 'lyj'
                    },
                    //设置返回类型
                    responseType: 'json'
                }).then(value => {      //设置响应
                document.getElementById("result").innerHTML = value.data.message;
            });
        })
        btnS[2].addEventListener('click', function () {
            //通用型方法
            axios({
                method: 'get',
                url: 'http://localhost:8080/axios',
                params: {
                    id: 1,
                    name: "hello"
                },
                headers: {
                    username: 'saner',
                    password: '12323'
                }
            }).then(value => {
                document.getElementById("result").innerHTML = value.data.message;
            })
        })
    
    </script>
    

    后台代码

    @RequestMapping("/axios")
    @ResponseBody
    public String axios(){
        Map<String, String> map = new HashMap<>();
        map.put("message","hello");
        String json = JSON.toJSONString(map);
        return json;
    }
    

    axios的简单使用和语法差不多是这样了。

    Axios过滤器

    就和Vue生命周期的钩子函数一样,有的我们需要在请求发起前和请求响应后横切入我们自己的一些操作,比如,想在每次发送请求时加入一个请求头信息,然后后台只接受含有请求头信息的请求。

    我们当然可以每次在参数中手动设置请求头信息,也可以使用函数去操作这件事,但是,axios提供了现有的方法来提供我们使用,那就是请求拦截器和响应拦截器,它会在每一次请求之前和请求之后都执行已定义的拦截器。

    axios过滤器机制

    20210508185350373

    请求拦截器

    axios.interceptors.request.use(function(request){
        request.headers.myToken='lyj';
        return request;
    },function(error){
        window.alert("resquest error");
    })
    

    响应拦截器

    axios.interceptors.response.use(function(response){
        window.alert("response ok");
        return response;
    },function(error){
        window.alert("response error");
    })
    
    • 这样的定义了之后,我们的每一个请求都会经过这定义的拦截器链,加上请求头信息,并且在结束后响应alert。

    async-await用法

    async-await我找了挺多的博客,然后对它有一个粗浅的认识。

    • async

    async异步

    • 它可以和await结合起来使用来解决axios中的同步问题,一般解决同步问题,我们只需要使用axios的链式结构来让代码依次序执行,而async也可以利用异步的方式解决这种同步问题。

    异步方法实现同步问题

    当我们需要链式结构来根据bid查询id,再根据id查询name。那么我们必须使用链式,但是使用async-await的方法可以让我们使用异步的方式来处理同步问题,将不需要使用链式结构。

    传统方式处理同步

    <div id="app">
        输入编号查询个人信息:<input v-model="id"></input><br />
        <a v-text="result"></a><br />
        <button v-on:click="submit()">提交</button>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                id: 0,
                result: ''
            },
            methods: {
                //链式结构解决同步
                submit: function() {
                    let ID = this.getId(this.id);
                    this.getId(this.id)
                    .then(result=>{
                        this.getUser(result.data.id)
                        .then(result=>{
                            this.result=result.data
                        })
                    })
                },
                //根据bid获取id
                getId: function(bid) {
                    return axios.get(`http://localhost:8080/getId/${bid}`)
                },
                //根据id获取name
                getUser: function(id) {
                    return axios.get(`http://localhost:8080/getUser/${id}`)
                }
            }
        })
    </script>
    

    后端接口

    @RequestMapping("/getId/{bid}")
    @ResponseBody
    public String axios1(@PathVariable("bid")String bid) throws InterruptedException {
        Thread.sleep(2000);
        Map<String, Integer> map = new HashMap<>();
        map.put("id",1);
        String json = JSON.toJSONString(map);
        return json;
    }
    
    @RequestMapping("/getUser/{id}")
    @ResponseBody
    public String axios2(@PathVariable("id")String id) throws InterruptedException {
        Thread.sleep(2000);
        return "张三";
    }
    

    异步方法处理同步请求

    <div id="app">
        输入编号查询个人信息:<input v-model="id"></input><br />
        <a v-text="result"></a><br/>
        <button v-on:click="submit()">提交</button>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                id: 0,
                result: ''
            },
            methods: {
                submit: async function() {
                    try{
                        //axios返回一个promise对象,而这种方式可以对promise的属性直接获取.将不需要通过then的方式.
                        let ID = await this.getId(this.id);	//等待响应后赋值
                        let name = await this.getUser(ID.data.id);
                        console.log(name.data);
                        this.result = name.data;
                    }catch(e){
                        //TODO handle the exception
                        console.log(e);
                    }
                },
                getId: function(bid) {
                    return axios.get(`http://localhost:8080/getId/${bid}`)
                },
                getUser: function(id) {
                    return axios.get(`http://localhost:8080/getUser/${id}`)
                }
            }
        })
    </script>
    

    Vue与后端交互案例

    Vue可以通过axios的方式和后端进行交互。

    Vue

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    		<script src="./js/axios.js"></script>
    	</head>
    	<body>
    		<div id="app">
    			<button v-on:click="addUser()">新增</button>
    			<table align="center" border="1px" width="800px">
    				<tr align="center">
    					<td>ID编号</td>
    					<td>姓名</td>
    					<td>年龄</td>
    					<td>性别</td>
    					<td>操作</td>
    				</tr>
    				<tr align="center" v-for="item in userList" :key="item.id">
    					<td>{{item.id}}</td>
    					<td>{{item.name}}</td>
    					<td>{{item.age}}</td>
    					<td>{{item.sex}}</td>
    					<td>
    						<button @click="updateUser(item)">修改</button>
    						<button @click="deleteUser(item.id)">删除</button>
    					</td>
    				</tr>
    			</table>
    			<hr />
    			<div id="updata" v-if="flag">
    				<h3 align="center">用户修改操作</h3><br>
    				<p>
    					用户ID号: <input type="text" name="id" v-model="user.id" disabled />
    					用户名称: <input type="text" name="name" v-model="user.name" />
    				</p>
    				<p>
    					用户年龄: <input type="text" name="age" v-model="user.age" />
    					用户性别: <input type="text" name="sex" v-model="user.sex" />
    				</p>
    				<p>
    					<button @click="updateUserBtn">修改</button>
    				</p>
    			</div>
    			<div id="add" v-if="addFlag">
    				<h3 align="center">用户新增操作</h3><br>
    				<p>
    					用户ID号: <input type="text" name="id" v-model="user.id" disabled />
    					用户名称: <input type="text" name="name" v-model="user.name" />
    				</p>
    				<p>
    					用户年龄: <input type="text" name="age" v-model="user.age" />
    					用户性别: <input type="text" name="sex" v-model="user.sex" />
    				</p>
    				<p>
    					<button @click="addUserBtn">修改</button>
    				</p>
    			</div>
    		</div>
    		<script type="text/javascript">
    			axios.defaults.baseURL = "http://localhost:8080";
    			var app = new Vue({
    				el: "#app",
    				data: {
    					flag: false,
    					addFlag: false,
    					userList: [],
    					user: {
    						id: '',
    						name: '',
    						age: '',
    						sex: ''
    					}
    				},
    				methods: {
    					async getall() {
    						result = await axios.get('/getAllUser');
    						this.userList = result.data;
    					},
    					updateUser(user){
    						this.flag=true;
    						this.user=user;
    					},
    					addUser(){		
    						this.addFlag=true;
    					},
    					async deleteUser(id){
    						await axios.delete(`/deleteUser/${id}`);
    						this.getall();
    					},
    					async updateUserBtn(){
    						await axios.put('/updateUser',this.user);
    						this.user='';
    						this.getall();
    						this.flag=false;
    					},
    					async addUserBtn(){
    						await axios.post('/addUser',this.user);
    						this.getall();
    					}
    				},
    				created() {
    					this.getall()
    				}
    			})
    		</script>
    	</body>
    </html>
    

    后端接口

    @RestController
    @CrossOrigin
    public class UserController {
    
        @Autowired
        private UserService userService;
    
        @GetMapping("/getUser/{id}")
        public String getUser(@PathVariable("id")int id){
            User user = userService.getUser(id);
            String json = JSON.toJSONString(user);
            return json;
        }
    
        @PostMapping("/addUser")
        public String addUser(@RequestBody User user){
            int r = userService.addUser(user);
            String json = JSON.toJSONString(r);
            return json;
        }
    
        @PutMapping("/updateUser")
        public String updateUser(@RequestBody User user){
            int r = userService.updateUser(user);
            String json = JSON.toJSONString(r);
            return json;
        }
    
        @DeleteMapping("/deleteUser/{id}")
        public String deleteUser(@PathVariable("id")int id){
            int r = userService.deleteUser(id);
            String json = JSON.toJSONString(r);
            return json;
        }
    
        @GetMapping("/getAllUser")
        public String getAllUser(){
            List<User> allUser = userService.getAllUser();
            String json = JSON.toJSONString(allUser);
            return json;
        }
    
    }
    
    

    展开全文
  • Vue - 与后端交互

    千次阅读 2021-02-05 00:18:43
    零:与后端交互 - ajax版本1 ...Vue与后端交互-出现了跨域问题加载数据letvm=newVue({el:'#box',data:{},methods:{handleClick(){$.ajax({url:'http://127.0.0.1:5000/',//发送请求的url,本地的5000端口,是flask的...

    b65127405adbcb7770ebc53e227ec8cb.png

    零:与后端交互 - ajax

    版本1 - 出现了跨域问题

    前端:index.htmlhtml>

    Vue与后端交互 - 出现了跨域问题
    加载数据
    复制代码

    后端:main.pyfrom flask import Flask# 这里用轻量级的Flask框架来测试app = Flask(__name__)@app.route('/')def index():print('请求来了')return 'Hello World'if __name__ == '__main__':

    app.run()复制代码

    f663bb8d16233c64bb2aa3f769201d22.png这里可以看出:前端向后端成功发送了请求,后端也成功响应了,但是前端却报错了

    这是因为:跨域问题的存在,浏览器检测到前端和后端不是来自同一个域,所以认为这是不安全的,所以就拦截了该资源的传递

    想要解决这个问题,就要实现:CORS,也就是 跨域资源共享

    版本2 - 解决了跨域问题

    前端:index.htmlhtml>

    Vue与后端交互 - 解决了跨域问题
    加载数据

    加载的数据:{{myText}}

    复制代码

    后端:main.pyfrom flask import Flask, make_response

    app = Flask(__name__)@app.route('/')def index():print('请求来了')

    res = make_response('Hello World')

    res.headers['Access-Control-Allow-Origin'] = '*'# 访问控制允许的源 设置为全部return resif __name__ == '__main__':

    app.run()复制代码

    372ac6cee0f9ae7fa61ebf43d3c5d331.png

    版本3 - 后端读取json文件传到前端

    json文件:file.json{  "name": "Darker",  "age": "18",  "gender": "male"}复制代码

    前端:index.htmlhtml>

    Vue与后端交互 - json
    加载数据

    加载的数据:{{myText}}

    复制代码

    后端:main.pyimport jsonfrom flask import Flask, jsonify

    app = Flask(__name__)@app.route('/')def index():print('请求来了')with open('file.json', mode='rt', encoding='utf-8') as f:

    dic = json.load(f)

    res = jsonify(dic)

    res.headers['Access-Control-Allow-Origin'] = '*'return resif __name__ == '__main__':

    app.run()复制代码

    9f2acd8a82b4580e89e57ab04d2adcaa.png

    一:fetch

    1.简介

    ① fetch介绍

    提供了一个 JavaScript 接口,用于访问和操纵 HTTP 管道的一些具体部分,例如请求和响应

    它还提供了一个全局 fetch() 方法,该方法提供了一种简单,合理的方式来跨网络异步获取资源

    ② fetch基本格式fetch('http://example.com/movies.json')

    .then(function(response) {return response.json();

    })

    .then(function(myJson) {console.log(myJson);

    });复制代码

    2.实例

    json文件:file.json{  "name": "Darker",  "age": "18",  "gender": "male"}复制代码

    后端:main.pyimport jsonfrom flask import Flask, jsonify

    app = Flask(__name__)@app.route('/')def index():print('请求来了')with open('file.json', mode='rt', encoding='utf-8') as f:

    dic = json.load(f)

    res = jsonify(dic)

    res.headers['Access-Control-Allow-Origin'] = '*'return resif __name__ == '__main__':

    app.run()复制代码

    前端:index.htmlhtml>

    Vue与后端交互 - fetch
    加载数据

    加载的数据:

    • 姓名:{{name}}
    • 年龄:{{age}}
    • 性别:{{gender}}
    复制代码

    cb49daa26d5b2dbaa25cc8d83ce7d341.png

    二:Axios

    1.简介

    ① Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中

    ② axios官网:http://www.axios-js.com/

    2.实例

    json文件:film.json(这里只是一部分,原代码太多了...){"data":{"films":[

    {"actors":[

    {"avatarAddress":"https://pic.maizuo.com/usr/movie/45deca0f886633f1a8902f7eece4248a.jpg","name":"林超贤","role":"导演"},

    {"avatarAddress":"https://pic.maizuo.com/usr/movie/ff8f5bfd455e660298452c0546bb23d5.jpg","name":"辛芷蕾","role":"方宇凌"},

    {"avatarAddress":"https://pic.maizuo.com/usr/movie/f27b94579d10d3131b476ec6c63a2722.jpg","name":"蓝盈莹","role":"演员"},

    {"avatarAddress":"https://pic.maizuo.com/usr/movie/0a30de65731f3ddc5ce5d5915c8d9d49.jpg","name":"彭于晏","role":"高谦"},

    {"avatarAddress":"https://pic.maizuo.com/usr/movie/728944e292dc6e8161acd7d5344d361c.jpg","name":"王彦霖","role":"赵呈"}

    ],"category":"剧情|灾难","director":"林超贤","filmId":4836,"filmType":{"name":"2D","value":1},"grade":"7.8","isPresale":true,"isSale":false,"item":{"name":"2D","type":1},"language":"汉语普通话","name":"紧急救援","nation":"中国大陆","poster":"https://pic.maizuo.com/usr/movie/c14a70858e2bda9c2bc8eaa7bfa0e2aa.jpg","premiereAt":1579910400,"runtime":100,"synopsis":"《紧急救援》是由林超贤导演,彭于晏、王彦霖、辛芷蕾、蓝盈莹出演的中国首部海上救援打捞题材的作品。筹备过程中,导演林超贤带领团队实地勘察选址,力求打造更劲爆,更震撼的场景设置,本次与奥斯卡最佳摄影鲍德熹,《泰坦尼克号》美术指导Martin Laing等国际顶级制作团队的强强联合,预示着电影将成为首部打开国际市场的华语救援题材作品,也势必会成为又一部华语电影的标杆之作。","timeType":3,"videoId":"XNDIyODM2NjE4OA=="},

    {"actors":[

    {"avatarAddress":"https://pic.maizuo.com/usr/movie/c8722df42d08942db01c2a262f576950.jpg","name":"易小星","role":"导演"},

    {"avatarAddress":"https://pic.maizuo.com/usr/movie/9627d1ebac2b4b12a06fd1623a62af99.jpg","name":"彭昱畅","role":"肖翔"},

    {"avatarAddress":"https://pic.maizuo.com/usr/movie/4b6da2deabe5dc7883321bb17372c25b.jpg","name":"乔杉","role":"周东海"},

    {"avatarAddress":"https://pic.maizuo.com/usr/movie/7efe813dd79280f236b8d1286cdc313c.jpg","name":"卜冠今","role":"周希希"},

    {"avatarAddress":"https://pic.maizuo.com/usr/movie/f244a95cdcd64625a50069bd64db49c2.jpg","name":"苇青","role":"王素芬"}

    ],"category":"喜剧|动作","director":"易小星","filmId":5266,"filmType":{"name":"2D","value":1},"grade":"7.2","isPresale":true,"isSale":false,"item":{"name":"2D","type":1},"language":"","name":"沐浴之王","nation":"中国大陆","poster":"https://pic.maizuo.com/usr/movie/e6aabffd040bda24f483bcc95ed79e62.jpg","premiereAt":1607644800,"runtime":102,"synopsis":"在一次搓澡服务中,富二代肖翔(彭昱畅 饰)和搓澡工周东海(乔杉 饰)发生矛盾,让周东海面临生活困境。肖翔因跳伞事故被送到医院记忆全失,周东海恰巧撞见,心生一计,骗肖翔是自己的弟弟并骗回周家澡堂当搓澡工,于是一个富二代开始了一段终身难忘的搓澡生涯……","timeType":3,"videoId":""},

    {"actors":[

    {"avatarAddress":"https://pic.maizuo.com/usr/movie/168e82b3c4ec676ca577cb99e5a9ee06.jpg","name":"派蒂·杰金斯","role":"导演"},

    {"avatarAddress":"https://pic.maizuo.com/usr/movie/c4cfadaaab8f81ebaf3bdc7aa30fac49.jpg","name":"盖尔·加朵","role":"戴安娜·普林斯 / 神奇女侠 Diana Prince / Wonder Woman"},

    {"avatarAddress":"https://pic.maizuo.com/usr/movie/6e0a82c6efac00bfb6b7c1b4bb46eaa9.jpg","name":"克里斯·派恩","role":"史蒂夫·特雷弗 Steve Trevor"},

    {"avatarAddress":"https://pic.maizuo.com/usr/movie/79a97235ee2f33741b63eafc2f34658e.jpg","name":"克里斯汀·韦格","role":"芭芭拉·密涅瓦 Cheetah"},

    {"avatarAddress":"https://pic.maizuo.com/usr/movie/13c53574fc0c4b13b99e966af5af7e9d.jpg","name":"佩德罗·帕斯卡","role":"马克斯维尔·劳德 Max Lord"}

    ],"category":"动作|奇幻|冒险","director":"派蒂·杰金斯","filmId":5287,"filmType":{"name":"3D","value":2},"isPresale":true,"isSale":false,"item":{"name":"3D","type":2},"language":"","name":"神奇女侠1984","nation":"美国","poster":"https://pic.maizuo.com/usr/movie/4f84f5a48560f5b14b0fac7768da4e05.jpg","premiereAt":1608249600,"runtime":151,"synopsis":"神奇女侠的全新大银幕冒险来到了1980年代。神奇女侠戴安娜在华盛顿的自然历史博物馆过着与普通人无异的生活,然而在阻止了一场看似平常的劫案后,身边的一切都发生了变化。在强大的神力诱惑下,两位全新劲敌悄然出现——与神奇女侠“相爱相杀”的顶级掠食者豹女,以及掌控着能改变世界力量的麦克斯·洛德,一场惊天大战在所难免。另外一边,旧爱史蒂夫突然“死而复生”,与戴安娜再续前缘,然而浪漫感动之余,史蒂夫的回归也疑窦丛生。","timeType":3,"videoId":""},

    {"actors":[

    {"avatarAddress":"https://pic.maizuo.com/usr/movie/6735332cb677645542c2f136eb37e561.jpg","name":"邱礼涛","role":"导演"},

    {"avatarAddress":"https://pic.maizuo.com/usr/movie/ca47cd961fe0be0c91149f6bcca2f13d.jpg","name":"刘德华","role":"潘乘风"},

    {"avatarAddress":"https://pic.maizuo.com/usr/movie/82a5d97e318c447133cd6c8262cee846.jpg","name":"刘青云","role":"董卓文"},

    {"avatarAddress":"https://pic.maizuo.com/usr/movie/e776871fe75f0367aa60957457a6f96c.jpg","name":"倪妮","role":"庞玲"},

    {"avatarAddress":"https://pic.maizuo.com/usr/movie/dd120eb1f6bda9f3b9c9e4c49785d0ce.jpg","name":"谢君豪","role":"演员"}

    ],"category":"动作|犯罪","director":"邱礼涛","filmId":5257,"filmType":{"name":"2D","value":1},"isPresale":true,"isSale":false,"item":{"name":"2D","type":1},"language":"","name":"拆弹专家2","nation":"中国大陆,中国香港","poster":"https://pic.maizuo.com/usr/movie/4a2bec5290b94f7eb597913727b21df6.jpg","premiereAt":1608768000,"runtime":0,"synopsis":"香港某处发生爆炸案,前拆弹专家潘乘风(刘德华 饰)因昏迷于现场,被警方怀疑牵涉其中。苏醒后的潘乘风只能一边逃亡一边查明真相,然而,他的好友董卓文(刘青云 饰)和他的前女友庞玲(倪妮 饰)却给他讲述了两段截然不同的经历。有计划的爆炸案接二连三发生,真相却越来越扑朔迷离……","timeType":3,"videoId":""}

    ],"total":47},"msg":"ok","status":0}复制代码

    后端:main.pyimport jsonfrom flask import Flask, jsonify

    app = Flask(__name__)@app.route('/film')def index():print('请求来了')with open('film.json', mode='rt', encoding='utf-8') as f:

    dic = json.load(f)

    res = jsonify(dic)

    res.headers['Access-Control-Allow-Origin'] = '*'return resif __name__ == '__main__':

    app.run()复制代码

    前端:index.htmlhtml>

    Vue与后端交互
    加载电影数据

    加载的数据:

    • 电影:{{item.name}}

      导演:{{item.director}}

    复制代码

    1581c7a384dbdd24381b113ae37c7627.png

    三:计算属性计算属性是基于它们的依赖进行缓存的

    计算属性只有在它的相关依赖发生改变时才会重新求值

    计算属性就像Python中的property,可以把方法/函数伪装成属性

    1.通过计算属性实现名字首字母大写html>

    首字母大写
    模板插值:

    {{myText.substring(0,1).toUpperCase()+myText.substring(1)}}

    普通方法:{{getNameMethod()}}

    计算属性:{{getName}}

    复制代码

    2cefef57c6dc14655f811ace691c2d6c.png

    2.通过计算属性重写过滤案例html>

    通过计算属性重写过滤案例
    • {{data}}
    复制代码

    3d621df376d7f96b19f99638e676ca40.png

    四:虚拟DOM 与diff算法 key的作用

    1.Vue2.0 v-for 中 :key 有什么用呢?

    其实呢不只是vue,react中在执行列表渲染时也会要求给每个组件添加key这个属性

    key简单点来说就是唯一标识,就像ID一样唯一性

    要知道,vue和react都实现了一套虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面

    而隐藏在背后的原理便是其高效的Diff算法分层级比较:只做同层级的对比

    通过key值比较:出现新的key就插入同组(循环中,尽量加key,让key值唯一)

    通过组件/标签进行比较:然后进行替换

    2.虚拟DOM的diff算法

    06d2567c5695f77e6feef9c13aa925da.png

    虚拟DOM数据渲染图示

    0d0bf5c22ae8838bfa8d32cf3ab17680.png

    3.具体实现

    ① 把树按照层级分解

    19faf28b896d35f092c03222f91aad5d.png

    ② 按照key值比较

    6eb7b4338e72c0446fc817dcdc8a9ce5.png

    ③ 通过组件进行比较

    a6ffcbf7bd24e3e1b3d95ba97399465e.png

    111

    222

    111
    222
    复制代码

    思考:什么是跨域问题?如何解决?

    展开全文
  • 其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。”但是这个概念是个什么鬼?还是让人一头雾水嘛。而且我一开始也没有搞清楚 vue 的定位,只知道它是一个前端库,但是确实不知道它的优势是什么,还以为...
  • node.js 链接数据库实现vue与后端交互

    千次阅读 2019-04-05 10:03:05
    首先实现vue前端的简单页面...设置vue.config.js:设置跨域相关(本身是在自己电脑上启动两个服务器一个后端服务器一个是vue启动的服务端口不同会造成跨域的问题) module.exports = { publicPath: '/', devServ...

    首先实现vue前端的简单页面,本页面是采用vue@cli构建项目,项目实现简单的登录注册功能,利用express进行网络通信。

    1:前端vue项目

    设置vue.config.js:设置跨域相关(本身是在自己电脑上启动两个服务器一个后端服务器一个是vue启动的服务端口不同会造成跨域的问题)

    module.exports = {
        publicPath: '/',
        devServer: {
            proxy: {
                '/api/login': {
                    target: 'http://localhost:3000/login',
                    changeOrigin: true,
                    ws: true,
                    pathRewrite: {
                      '^/api/login': ''
                    }
                },
                '/api/register': {
                    target: 'http://localhost:3000/register',
                    changeOrigin: true,
                    ws: true,
                    pathRewrite: {
                      '^/api/register': ''
                    }
                }
            }
        }
    }

    login.vue

    <template>
      <div class="hello">
        <div class="loginWrapper">
          <input type="text" v-model="form.username" placeholder="请输入用户名"/>
          <input type="password" v-model="form.password" placeholder="请输入密码"/>
          <div class="btns">
            <button @click="register">注册</button>
            <button @click="login">登录</button>
          </div>
        </div>
      </div>
    </template>
    
    <script>
    import axios from "axios";
    import api from "../api/index.js"
    
    export default {
      name: 'HelloWorld',
      props: {
        msg: String
      },
      data() {
        return {
          message: "",
          form: {
            username: "",
            password: ""
          }
        }
      },
      async created () {
        console.log("msg is ",this.msg);
        console.log("开始请求");
        let res = await axios.get(api.data);
        console.log("res is ",res);
        this.message = res.data.message;
      },
      methods: {
        async register() {
          let form = this.form;
          if(this.form.username !== "" && this.form.password !== "") {
            let registerRes = await axios.request({
              url: '/api/register',
              method: "POST",
              data: form
            });
            console.log("registerRes is ",registerRes);
          }
        },
        async login() {
          console.log("username is ",this.form.username);
          console.log("password is ",this.form.password);
          let form = this.form;
          let loginRes = await axios.request({
            url: '/api/login',
            method: "POST",
            data: form,
          });
          console.log("loginRes is ",loginRes);
          
        }
      },
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped lang="less">
    .loginWrapper{
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
    }
    h3 {
      margin: 40px 0 0;
    }
    ul {
      list-style-type: none;
      padding: 0;
    }
    li {
      display: inline-block;
      margin: 0 10px;
    }
    a {
      color: #42b983;
    }
    </style>
    

    2:服务端index.js

    const express = require("express");
    const crypto = require("crypto");
    const bodyParser = require("body-parser");
    const app = express();
    const connection = require("../dao/index.js");
    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({extended: true}));
    app.get("/", (req,res) => {
        // 得到get请求的参数 使用query
        console.log(req.query);
        res.send("hello world dfasd");
    });
    app.get("/data",(req,res) => {
        // res.writeHead("Access-Control-Allow-Origin","*");
        res.setHeader("Access-Control-Allow-Origin","*");
        let data = {
            message: "hello",
            status: 200,
            data: {
                name: "lck",
                age: 34,
                sex: 0
            }
        }
        res.send(JSON.stringify(data));
    });
    app.post("/login",async (req,res,next) => {
        console.log("req is ",req.body);
        let username = req.body.username;
        let password = req.body.password;
        let self = this;
        let realPassword = Util.md5(Util.md5(password).substr(10,20) + Util.md5(password));
        console.log("realPassword is ",realPassword);
        try {
            const insertRes = await new Promise((resolve,reject) => {
                let addUser = "select * from user where username = ?";
                let queryParams = [username];
                connection.query(addUser,queryParams,(err,result) => {
                    try {
                        console.log("result is ",result);
                        resolve(result);
                    } catch(e) {
                        console.log("e is ",e);
                        reject();
                    }
                })
            });
            if(insertRes.length > 0) {
                console.log("insertRes is ",insertRes[0]);
                console.log("insertRes is ",insertRes[0].password === realPassword);
                if(insertRes[0].password === realPassword) {
                    res.send({message: "ok",status: 200});
                } else {
                    res.send({message: "密码错误",status: 200});
                }
            } else {
                res.send({message: "用户名不存在",status: 400});
            }
        } catch(e) {
            console.log("e is ",e);
            res.send({message: "no",status: 400});
        }
    });
    app.post("/register",async (req,res,next) => {
        let hashes = crypto.getHashes();
        let keyhash = crypto.createHmac('md5',req.body.password)
                      .update('I love cupcakes')
                      .digest('hex');
        console.log("hashes is ",keyhash);
        let username = req.body.username;
        let password = req.body.password;
        try {
            const insertRes = await new Promise((resolve,reject) => {
                let addUser = `insert into user(id,username,password,gender) values(null,?,?,?)`;
                let addParams = [username,keyhash,1];
                connection.query(addUser,addParams,(err,result) => {
                    console.log("result is ",result);
                    resolve(result);
                })
            });
            res.send({message: "ok",status: 200});
        } catch(e) {
            res.send({message: "no",status: 400});
        }
    })
    let server = app.listen(3000,() => {
        let host = server.address().address;
        let port = server.address().port;
        console.info("host is ",host," port is ",port);
    })

    dao层index.js

    const mysql = require("mysql");
    const connection = mysql.createConnection({
        host: "localhost",
        user: "root",
        password: "密码",
        database: "数据库名"
    });
    connection.connect();
    module.exports = connection;

    这样只是简单的一些关于express,mysql的简单操作,在此记录下express使用的流程(接收post请求参数和链接数据库对数据库进行操作的具体细节)哪里不适还请各位大佬指正

    展开全文
  • Vue项目手把手教你:一个vue项目和后端进行交换

    千次阅读 多人点赞 2022-02-09 19:58:55
    1、我们Vue项目执行流程 得到如下的一个格式有,渲染流程如下 首先我们的主要的页面就一个(public下面的index.html) 其实就我们的App.vue渲染到我们的index.html(我们的项目只有一个app的一个id) 整体上做...
  • 最近遇到一个很奇怪的问题:前端vue后端java项目布在同一台服务器(假设该服务器为180服务器),该180服务器无法通过外网访问,前端通过另一台可ping通180服务器和连接外网的服务器(假设为181服务器)进行nginx外...
  • axios的简单使用 Axios是一个开源的可以用在浏览器端和NodeJS的异步通信框架,它的主要作用就是实现Ajax异步通信。...//设置默认请求的路径(http://localhost:8088为请求后端的路径) axios.defaults.baseURL
  • Vue中前端与后端如何交互

    千次阅读 多人点赞 2020-08-24 13:10:12
    Vue中前后端交互Promise的基本使用基本使用多个请求,链式编程Promise的API---实例方法Promise的API---对象方法 Promise的基本使用 基本使用 new一个promise,为其传入一个函数作为参数,这个函数中传入两个参数,...
  • 前面说所说的vue及相关组件都没有与后端交互。 因为显示设备的多样化,现在基本上都是使用前后端分离,后端基本上都是使用api方式,基本上是以restful api为主。 所以这篇开始讲使用axios后端api交互。可以先看...
  • Vue前后端交互,axios,github用户搜索案例
  • 第一种使用js原生的fetch与后端交互 fetch('http://127.0.0.1:8000/api/v1/shopping/').then(data => data.json()).then(data => { this.commoditys = data }) fetch('...
  • Vue前端如何与后端进行数据交互

    千次阅读 2021-03-03 11:03:15
    //后台交互 Vue.prototype.$http=Axios //defaults 设置全局默认路径 Axios.defaults.baseURL="/bigData" 3、使用 //第一种 this.$http.post('/index/customer/').then(function(res) { // console.log('这是返回...
  • vue前端java后端交互

    万次阅读 多人点赞 2018-12-26 17:21:53
    前端写法:  后端布局:
  • vue与后端交互的工具

    2018-05-17 15:18:33
    axioshttps://www.kancloud.cn/yunye/axios/234845

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 25,703
精华内容 10,281
关键字:

vue与后端交互