二.1.vue-开发环境搭建
1.下载二进制包 https://nodejs.org/zh-cn/
直接下一步下一步即可，然后dmd中如下显示说明成功：
C:\Program Files\nodejs>node -v
v12.18.1
https://github.com/PanJiaChen/vue-element-admin ---这是github上vue完整项目模版，它的在线预览如下图:
2.widows安装git
https://www.git-scm.com/download/win --下载
http://www.mamicode.com/info-detail-2736524.html ---安装
效果如下：
3.新建前端代码目录web和我的devops项目后端代码目录同级：
4.把vue模版克隆下来:
F:\devops\data\web>git clone https://github.com/gxhsh/vueAdmin-template.git
5.安装nodejs
https://developer.aliyun.com/mirror/NPM?from=tnpm
注意安装过程中出现war正常，出现error就不行。
安装完后，此时它就生成F:\devops\data\web\vue-admin-template\node_modules目录(里边是依赖包)，若安装时出错就直接把此目录删除再重新装
6.运行服务
点击登录后，模版环境就出来了如下图:
若登录不了就参照第十步修改前端代码：
7.起后端项目服务
[vagrant@CentOS ~]$ source python36env/bin/activate
(python36env) [vagrant@CentOS ~]$ cd /vagrant/
(python36env) [vagrant@CentOS vagrant]$ cd devops/
(python36env) [vagrant@CentOS devops]$ ls
apps devops manage.py scripts
(python36env) [vagrant@CentOS devops]$ python manage.py runserver 0.0.0.0:8000
访问后端接口：http://127.0.0.1:8000/
8.因为我的后端项目中我之前做了权限，所以这里我把所有api的权限取消
9.打开pycharm修改为允许垮域访问settings.py:
(1)安装：打开github搜索django cors header --->https://github.com/adamchainz/django-cors-headers对照此
(python36env) [vagrant@CentOS devops]$ pip install django-cors-headers 不做此步的话无法通过命令来通过ajax(异步请求)请求数据
(2)配置settings.py:
(3)middleware配置中注意先后顺序:放在commonmiddleware上---添加中间件监听
(4)配置允许跨域的域名：这里设成*,允许所有域名跨域请求我数据，如果是线上环境的话，你允许哪个域名请求，这里就写哪个域名即可
(python36env) [vagrant@CentOS devops]$ python manage.py runserver 0.0.0.0:8000 起动服务
10.配置前端代码用webstorm/notepa++/vscode等均可：
修改配置打开webstorm/notepa++/vscode等均可:
(1)F:\devops\data\web\vueAdmin-template\config\dev.env.js ---开发环境的
(2)F:\devops\data\web\vueAdmin-template\src\permission.js --全部注释掉，因为它做了权限验证所以你访问不了：
做修改后重新npm run dev下，此时就可访问了：
二.vue对接drf
11.获取数据：我把数据放在它dashboard页面中：
它所有的我们能看到的页面都是在views文件夹中
(1)改dashboard/index.vue:
<template><div class="dashboard-container">
aaaa
</div>
</template>
<script>
// 导入我定义的接口文件dashboard.js中的getUserList函数,@符是指src目录
import { getUserList } from \'@/api/dashboard\'
export default {
// created方法是生命周期函数(这里是dom挂载后执行fetchData获取数据--getUserList()会发起dashboard.js中定义的getUserList方法发起异步请求然后return给.then)
created() {
this.fetchData()
},
// methods是把所有方法定义在它中
methods: {
fetchData() {
// then就是执行getUserList函数成功后会返回一数据放在response中res
getUserList().then(res => {
// 打印res
console.log(res)
})
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard {
&-container {
margin: 30px;
}
&-text {
font-size: 30px;
line-height: 46px;
}
}
</style>
(2)取消devop后端所有api的权限，这样便于前端获取数据:settings.py:
REST_FRAMEWORK = { \'DEFAULT_SCHEMA_CLASS\': \'rest_framework.schemas.coreapi.AutoSchema\',
\'PAGE_SIZE\':10,
\'DEFAULT_PAGINATION_CLASS\':\'users.pagination.Pagination\',
\'DEFAULT_FILTER_BACKENDS\': (
\'django_filters.rest_framework.DjangoFilterBackend\',
),
\'DEFAULT_PERMISSION_CLASSES\': [
\'rest_framework.permissions.AllowAny\',
# \'devops.permissions.Permissions\',
]
}
(3)新建api/dashboard.js: 所有的api接口调用全写在这--写接口
// 请求的模块import request from \'@/utils/request\'
// 定义getUserList函数,params参数,
export function getUserList(params) {
return request({
// 这个url是跟config/dev.env.js中的BASE_API组合关联的,是url和get拼接在一起的，所以BASE_API中的url后不要加斜线了
url: \'/users/\',
method: \'get\',
params
})
}
(4)src/utils/request.js---这是模版中别人写好的，我把改成如下自己需要的:
import axios from \'axios\'import { Message } from \'element-ui\'
// import { getToken } from \'@/utils/auth\'
// 创建axios实例
const service = axios.create({
baseURL: process.env.BASE_API, // api的base_url
timeout: 15000 // 请求超时时间
})
// request拦截器
// service.interceptors.request.use(config => {
// if (store.getters.token) {
// config.headers[\'X-Token\'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
// }
// return config
// }, error => {
// // Do something with request error
// console.log(error) // for debug
// Promise.reject(error)
// })
// respone拦截器
service.interceptors.response.use(
response => {
/**
* code为非20000是抛错 可结合自己业务进行修改
*/
return response.data
},
error => {
console.log(\'err\' + error)// for debug
Message({
message: error.message,
type: \'error\',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
export default service
(5)给浏览器安装vue插件:浏览器右上方右键--扩展程序--输入vue并安装这个Vue.js devtools
刷新浏览器如下效果拿到数据了只是还没在页面展示出来：
12.数据展示
(1)找到https://element.eleme.cn/#/zh-CN/component/带边框的table表格模版-->把el-table代码块全复制到dashboard/index.vue
<template><div class="dashboard-container">
<el-table
:data="tableData" 所有的数据存放在tableData中,它是一变量且是result结果的列表
border
style="width: 100%"> 表格宽度
<el-table-column
prop="id" prop是记录的属性即字段
label="id"> label是表头信息
</el-table-column>
<el-table-column
prop="username"
label="用户名">
</el-table-column>
<el-table-column
prop="email"
label="email">
</el-table-column>
</el-table>
</div>
</template>
<script>
// 导入我定义的接口文件dashboard.js中的getUserList函数,@符是指src目录
import { getUserList } from \'@/api/dashboard\'
export default {
// 定义一变量是在data(){ return{} }中定义
data() {
return {
tableData: []
}
},
created() {
this.fetchData()
},
// methods是把所有方法定义在它中
methods: {
fetchData() {
getUserList().then(res => {
// tableDate中的内容是我们请求里的result,res就是页面返回的数据
this.tableData = res.results
})
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard {
&-container {
margin: 30px;
}
&-text {
font-size: 30px;
line-height: 46px;
}
}
</style>
(2)添加分页功能 :
找到https://element.eleme.cn/#/zh-CN/component/带背景的分页-->把代码块拷贝到dashboard/index.vue中的表格el-table下面
效果如下：
(3)自定添加分页其它效果---参考https://element.eleme.cn/#/zh-CN/component/文档添加想要的分页功能
a.上图效果中，总数据是1000条这个不对，这是它默认的不是我的真实数据量，所以我参数total放进去并把请求结果res中的result中count传给它即可
b.当前是第几页的数据也没展示:element文档中可知用Event事件中的current-change事件(当前页改变时触发)
这里我让此current-change事件等于一个函数handleCurrentChange,所以我定义此函数
handleCurrentChange(val) { console.log(`当前页: ${val}`);
如下图效果中:我选某页时，它打印某页码了
当前页码拿到了但是页码对应的数据没展示出来，所以要传给drf---定义几变量，传给drf后端url中要参数.且要注意你vue前端改变页码那要发ajax请求服务端,数据才会变更。
......
data() {
return {
tableData: [],
totalNum: 0,
params: { 定义参数，参数中可有多变量
page: 1
}
}
},.......
methods: {fetchData() {
getUserList(this.params).then(res => { 并给它传参数params
// tableDate中的内容是我们请求里的result,res就是页面返回的数据
this.totalNum = res.count
this.tableData = res.results
})
},
handleCurrentChange(val) {
this.params.page = val // 给变量page传值
this.fetchData() // 发起ajax请求
}
}
如下效果中展示对应页码的数据了:
c.让页码栏居中显示---给它框一个div，属性是center即可：
<div style="text-align: center"><el-pagination
background
layout="total, prev, pager, next"
@current-change="handleCurrentChange"
:total="totalNum">
</el-pagination>
</div>
完整代码：
<template><div class="dashboard-container">
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column
prop="id"
label="id">
</el-table-column>
<el-table-column
prop="username"
label="用户名">
</el-table-column>
<el-table-column
prop="email"
label="email">
</el-table-column>
</el-table>
<div style="text-align: center; margin-top: 10px;">
<el-pagination
background
layout="total, prev, pager, next"
@current-change="handleCurrentChange"
:total="totalNum">
</el-pagination>
</div>
</div>
</template>
<script>
// 导入我定义的接口文件dashboard.js中的getUserList函数,@符是指src目录
import { getUserList } from \'@/api/dashboard\'
export default {
// 1.定义一变量是在data(){ return{} }中定义
data() {
return {
tableData: [],
totalNum: 0,
params: {
page: 1
}
}
},
created() {
this.fetchData()
},
// 2.methods是把所有方法定义在它中--这里是给变量获取数据
methods: {
fetchData() {
getUserList(this.params).then(res => {
// tableDate中的内容是我们请求里的result,res就是页面返回的数据
this.totalNum = res.count
this.tableData = res.results
})
},
handleCurrentChange(val) {
this.params.page = val // 给变量page传值
this.fetchData() // 发起ajax请求
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard {
&-container {
margin: 30px;
}
&-text {
font-size: 30px;
line-height: 46px;
}
}
</style>
以上是 二.1.vue-开发环境搭建 的全部内容， 来源链接： utcz.com/z/377643.html
