zoukankan      html  css  js  c++  java
  • 第四阶段:Vue框架 day75 Vue--Vue前后端配合搭建项目

    昨日内容复习

    """
    1、箭头函数 let fn = (a, b) => a + b;
    	let 函数名 = (参数列表) => {函数体}
    
    2、函数原型:给函数设置原型 Fn.prototype.变量 = 值,那么Fn new出来的对象都可以共用 原型变量
    	function Fn() {}
    	let f1 = new Fn()
    	let f2 = new Fn()
    	Fn.prototype.fn = () => {}
    	Fn.prototype.fn2 = function () {}
    	f1.fn()
    	f2.fn()
    
    3、vue项目的请求生命周期:main.js完成环境的加载与根组件的渲染;router的index.js完成路由映射
    	项目启动:加载main.js:index.html、new Vue()、Vue、router、store、完成App.vue的挂载
    	请求:请求路径 => router路由 => 页面组件(小组件) => 替换<router-view />完成页面渲染 => <router-link>(this.$router.push())完成请求路径的切换
    	
    4、<router-view />标签作为路由映射的页面组件占位符
    5、<router-link></router-link>来完成路由的跳转
    	<router-link to="/1" :to="{name:'home', params={arg: 1}}">主页</router-link>
    	
    	{
    		path: '/:arg',
    		name: 'home',
    		component: Home
    	}
    	
    6、this.$router来完成路由的跳转:push() | go()
    	this.$router.push('/1');
    	this.$router.push({name:'home', params={arg: 1}});
    	this.$router.go(-1);
    	this.$router.go(1);
    
    7、this.$route来完成路由的传参
    	this.$route.params.arg
    	this.$route.params['arg']
    	
    8、资源的加载
    	require(资源的相对路径)
    """
    

    知识点总结

    """
    1、vue项目配置全局css文件:在main.js中用import导入或是require()加载 .css 文件
    	assets/css/global.css
    	import '@/assets/css/global.css' | require('@/assets/css/global.css')
    
    2、vue项目配置全局js文件:在main.js中用import导入 .js 文件,并将其设置给 Vue 原型
    	settings.js => export default {base_url='http://127.0.0.1:8000'}
    	import settings from '@/assets/js/settings.js'
    	Vue.prototype.$settings = settings => this.$settings.base_url
    	
    3、vuex提供的store仓库存储,可以完成组件间的传参(了解)
    	store/index.js => state: {num: 0}
    	this.$store.state.num
    
    4、vue项目配置axios可以完成前后台交互:this.$axios({}).then(response=>{}).catch(error=>{})
    	import axios from 'axios'
    	Vue.prototype.$axios = axios
    	this.$axios({
    		url: '后台接口',
    		method: 'get|post',
    		params: {},
    		data: {},
    		headers: {},
    	}).then(response=>{
    		response.data
    	}).catch(error=>{
    		error.response.data
    	})
    
    5、django利用django-cors-headers插件解决前后台分类项目跨越问题(重点)
    	注册corsheaders => 添加中间件 => 允许跨越
    
    6、前台两种提交数据的方式:url拼接参数,数据包参数
    7、前后台分离,后台登录通过的token会返回给前台,前台自己处理存储在cookie中:vue-cookies插件操作cookie
    	token = response.data.token
    	
    	this.$cookies.set(k, v, exp);
    	this.$cookies.get(k);
    	this.$cookies.remove(k);
    	
    8、全局应用配置element-ui、bootstrap
    	import ElementUi from 'element-ui'
    	Vue.use(ElementUi)
    """
    

    vue配置bs环境

    https://www.cnblogs.com/foreversun92/p/11868997.html

    vue前后台分离跨域交互

    https://www.cnblogs.com/foreversun92/p/11869001.html

    今日作业

    A作业(必做)

    """
    1、整理今天所学知识点
    
    2、将vue知识点系统回顾一下:vue指令、vue成员、vue生命周期钩子、vue项目的请求生命周期、vue文件组件(结构、语法、导入、页面与小组件)、父子组件间的传参(Cars页面渲染多个Car组件)、路由(占位、跳转、传参)、配置各种第三方插件(element、jq+bs、axios、cookie)
    
    3、完成基础前后台分类的数据展示类网站
    	封装导航栏Nav小组件,完成各页面的跳转,在需要导航栏的页面中渲染Nav小组件
    	在主页Home组件中,写一个轮播图(bs和element都要提供),完成后台数据的轮播展示
    	将汽车主页数据渲染以及详情页数据渲染的数据,都放在后台(用mysql数据库存储),完成后台数据的渲染,前台父子组件以及组件间的传参
    """
    

    B作业(选做)

    """
    1、尝试将bbs重构为前后台分类项目
    2、好好预习drf视频(重中之重重)
    """
    
  • 相关阅读:
    FlatBuffers要点
    tarjan+缩点+强连通定理
    编程之美2.16 最长递增子序列
    Android Studio之多个Activity的滑动切换(二)
    Effective java读书札记第一条之 考虑用静态工厂方法取代构造器
    【PM】关于系统数据库和服务现场升级的一些看法
    用户及权限基础 2---- 权限
    Android双向滑动菜单完全解析,教你如何一分钟实现双向滑动特效
    【转贴】gdb中的信号(signal)相关调试技巧
    基于新浪sae使用php生成图片发布图文微博
  • 原文地址:https://www.cnblogs.com/foreversun92/p/11869019.html
Copyright © 2011-2022 走看看