vue项目集成axios,vue项目前后端打通

vue项目目录介绍

myfirstvue——项目名字

node_modules——文件夹，内部有很多当前项目依赖的模块，可以删除，npm install
public——文件夹
- favicon.ico——网站小图标
- index.html——spa:单页面应用
src——以后写代码，都在这下面写
- assets——静态资源，js，css，图片，类似于static文件夹
  - logo.png——静态资源的图片
- components——组件:小组件，用在别的大(页面组件)组件中
  - HelloWorld.vue——默认了一个hello world组件
- router——装了vue-router自动生成的，如果不装就没有
  - index.js——vue-router的配置
- store——装了vuex自动生成的，如果不装就没有
  - index.js——vuex的配置
- views——放了一堆组件，页面组件
  - AboutView.vue——关于页面的组件
  - HomeView.vue——主页页面的组件
- App.vue——根组件
- main.js——整个项目启动入口
.gitignore——git的忽略文件
babel.config.js——babel的配置
jsconfig.json
package.json——当前项目所有依赖，类似于python项目的requirements.txt
package-lock.json——锁定文件:package.json中写了依赖的版本，这个文件锁定所有版本
README.md——项目的介绍
vue.config.js——vue项目的配置文件

es6的导入导出语法

1.如果要在其他js文件中导入，要先导出
-默认导出
-命名导出

2.默认导出
2.1导出方法:使用export default导出
var name = 'barry'

function printName() {
    console.log(name)
}

var f = () => {
    console.log('f')
}
// 必须要先导出，其他js才能导入
export default {
    'name': name,
    'printName': printName,
    'f': f,
}
2.2导入:
// 引入abc下的utils，使用变量和函数
import abc from './abc/utils'

console.log(abc.name)
abc.printName()
abc.f()

3.命名导出
3.1导出:使用export const导出
export const name = 'barry'
export const printName = () => {
    console.log(name)
}

3.2根据名字导出
import {name} from './abc/utils'
import {printName} from './abc/utils'

console.log(name)
printName()

4.可以在包下建立一个名为index.js的文件，导入是会默认导入该文件
import {name} from './abc'

console.log(name)

vue项目开发规范

1.以后写的组件，都是单页面组件，使用xx.vue，写一个组件介绍一个xx.vue，页面组件和小组件
-一个组件就是一个xx.vue，内部都有三部分
	<template></template>  // html内容写在里面
	<script></script>  // 写js内容
	<style></style>  // 写css样式

2.main.js是整个入口
2.1把App.vue根组件导入
2.2使用
new Vue({
    render: h => h(App)  // 等同于el:'#app'，在将App导入
}).$mount('#app')
把App.vue组件中得数据和模板，插入到index.html的id为app的div中
2.3只要在每个组件的export default {}写js
2.4只要在每个组件的template，写模板、插值语法、指令
2.5只要在每个组件的style，写样式

3.实例
<template>
  <div id="app">
    <h1>{{ name }}</h1>
    <button @click="handleClick">点击</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      name: 'harry'
    }
  },
  methods: {
    handleClick() {
      alert('哈哈哈')
    }
  }
}
</script>

<style>
h1{
  background-color: chartreuse;
}
</style>

vue项目集成axios,vue项目前后端打通

1.安装axios
'--S的意思是保存到package.json中'
cnpm install axios --S

2.导入使用
import axios from 'axios'

3.解决跨域(django项目)
3.1pip3 install django-cors-headers
3.2app中注册:
INSTALLED_APPS = [
    ...
    'corsheaders',
]
3.3中间件注册
MIDDLEWARE = [
...
'corsheaders.middleware.CorsMiddleware',
...
]
3.4把下面的复制到配置文件中
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_METHODS = (
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
    'VIEW',
)
CORS_ALLOW_HEADERS = (
    'XMLHttpRequest',
    'X_FILENAME',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
    'Pragma',
)

4.发送请求，获取数据
<script>
import axios from 'axios'

export default {
  name: 'App',
  data() {
    return {
      bookList: ''
    }
  },
  created() {
    axios.get('http://127.0.0.1:8000/books/').then(res => {
      console.log(res.data)
      this.bookList = res.data
    })
  }
}
</script>

前后端交互版登录功能

<template>
  <div id="app">
    <h1>登录</h1>
    <p>用户名:<input type="text" v-model="username"></p>
    <p>用户名:<input type="text" v-model="password"></p>
    <button @click="handleSubmit">确认</button>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'App',
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    handleSubmit() {
      axios.post('http://127.0.0.1:8000/user/', {
        username: this.username,
        password: this.password
      }).then(res => {
        console.log(res.data)
      })
    }
  },
}
</script>

props配置项

1.用于接受父传子自定义的属性
-数组写法
-对象写法
-对象套对象写法

2.用法
<template>
  <div>
    <button>后退</button>
    {{ title }}---{{ msg }}
    <button>前进</button>
  </div>
</template>

<script>
export default {
  name: "Child",
  // 使用
  // props:['msg'],
  // 指定属性类型
  // props: {msg: String},
  props: {
    msg: {
      type: String,  // 指定类型
      required: true,  // 是否必须要有值
      default: '隔壁老王'  // 默认值
    }
  },
  data() {
    return {
      title: '首页'
    }
  }
}
</script>

3.App
// @符号代指src路径
import Child from "@/components/Child";

export default {
  name: 'App',
  components:{
    Child
  },

混入

1.mixin(混入):可以把多个组件共用的配置提取成一个混入对象，之后可以在全局使用或局部使用

2.写个mixin/index.js
// 写一个混入对象
export const hunhe = {
    methods: {
        handlePrintName() {
            alert(this.name)
        }
    },
}
2.1局部导入
// 导入混入对象
import {hunhe} from "@/mixin";

mixins:[hunhe,],
2.3全局使用在main.js文件中
import {hunhe} from "@/mixin";
Vue.mixin(hunhe)

插件

1.用于增强Vue
-包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件传递的数据

2.使用
import Vue from "vue";
import axios from "axios";
import {hunhe} from "@/mixin";

export default {
    install(miVue) {
        console.log(miVue)
        // Vue实例上放个变量
        Vue.prototype.$name = 'aaa'
        // 导入axios
        Vue.prototype.$ajax = axios
        // 使用插件，在全局加入混入
        Vue.mixin(hunhe)
    }
}

3.在main.js 中使用插件
// 使用插件
import plugins from '@/plugins'
// 使用use，会自动触发插件对象中的install
Vue.use(plugins)

scoped样式

1.在style上加scoped，让样式只针对当前组件生效
<style scoped>
    ...
</style>

localStorage和sessionStorage

1.localStorage和sessionStorage是window浏览器对象有的
1.1在浏览器中存储数据
-永久存储:localStorage 
不登录加购物车，没登录搜索过的商品
-临时存储:sessionStorage
关闭页面数据就没了
-定时存储:cookie
设定一个时间，到时候就过期
# cookie需要安装-----》cnpm install vue-cookies -S


2.序列化和反序列化
对象转json字符串 
JSON.stringify(person)
json字符串转对象
JSON.parse()

使用

<template>
  <div id="app">
    <h1>localStorage操作</h1>
    <button @click="saveStorage">点我向localStorage放数据</button>
    <button @click="getStorage">点我获取localStorage数据</button>
    <button @click="removeStorage">点我删除localStorage放数据</button>

    <h1>sessionStorage操作</h1>
    <button @click="saveSessionStorage">点我向sessionStorage放数据</button>
    <button @click="getSessionStorage">点我获取sessionStorage数据</button>
    <button @click="removeSessionStorage">点我删除sessionStorage放数据</button>

    <h1>cookie操作</h1>
    <button @click="saveCookie">点我向cookie放数据</button>
    <button @click="getCookie">点我获取cookie数据</button>
    <button @click="removeCookie">点我删除cookie放数据</button>
  </div>
</template>

<script>
import cookies from 'vue-cookies'

export default {
  name: 'App',
  data() {
    return {}
  },
  methods: {
    saveStorage() {
      var person = {name: 'barry', age: '20'}
      // JSON.stringify(person)将对象转换为json字符串
      localStorage.setItem('userinfo', JSON.stringify(person))
    },
    getStorage() {
      let userinfo = localStorage.getItem('userinfo')
      console.log(userinfo)
    },
    removeStorage() {
      // localStorage.clear()  // 删除所有
      localStorage.removeItem('userinfo')  // 删除单条
    },

    saveSessionStorage() {
      var person = {name: 'barry', age: '20'}
      sessionStorage.setItem('userinfo', JSON.stringify(person))
    },
    getSessionStorage() {
      let userinfo = sessionStorage.getItem('userinfo')
      console.log(userinfo)
    },
    removeSessionStorage() {
      // sessionStorage.clear()  // 删除所有
      sessionStorage.removeItem('userinfo')  // 删除单条
    },

    saveCookie() {
      cookies.set('name', 'barry', '7D')  // 按7天
    },
    getCookie() {
      console.log(cookies.get('name'))
    },
    removeCookie() {
      cookies.remove('name')
    },
  }
}
</script>

集成elementui

1.使用第三方样式库
-饿了么团队：elementui
-iview
-移动端的ui：vant

2.使用
-安装
cnpm i element-ui -S
-在main.js中引入
// element-ui全局使用
import Element from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(Element)

posted @ 2022-10-31 23:10 无言以对啊阅读(219) 评论(0) 收藏举报

刷新页面返回顶部

无言以对

vue项目集成axios,vue项目前后端打通

vue项目目录介绍

es6的导入导出语法

vue项目开发规范

vue项目集成axios,vue项目前后端打通

前后端交互版登录功能

props配置项

混入

插件

scoped样式

localStorage和sessionStorage

集成elementui

公告