二.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模版克隆下来:

 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等均可

11

22

猜你喜欢

转载自www.cnblogs.com/dbslinux/p/13180500.html
今日推荐