天天速递！vue-cli创建前端项目以及前后端交互

2023-02-20 23:09:47 来源：博客园

vue-cli创建前端项目以及前后端交互
- 一、vue-cli创建项目
- 二、Vue项目目录介绍
- 三、es6导入导出语法
  - 1.默认导入导出语法
  - 2.命名导入导出语法
- 四、Vue项目编写的步骤
- 五、前后端分离的登录功能
  - 1.Vue前端部分
  - 2.解决跨域的终极方法
  - 3.后端代码
  - 4.前后端交互的效果图展示

vue-cli创建前端项目以及前后端交互

引言，以后开发，就是用工程化、前端做成项目使用工具(vue-cli)，创建出Vue项目，单页面应用(spa)、组件化开发、xx.vue，但是问题又来了；李璐蓝旗只能识别js、HTML、CSS，但是vue-cli解决了这个痛点。在项目中开发，最后上线一定要编译成纯粹的HTML、js、CSS。因此我们vue-cli工具，使用node.js写的，要运行，需要node环境，当然需要下载node解释器。也很简单，去官网找到对应的操作系统点击一路next即可。

(资料图)

环境变量指的是可执行文件路径node相当于Python解释器npm相当于pip

解释型语言即需要解释器没有解释器即不能运行eg：Python、node、js、PHP
编译型语言即直接把源码编译成不同的可执行文件eg：C、C++、go
java有点特殊特点是一处编码处处使用，目前有各种解释。

那么node.js怎么来的呢？ js只能运行在浏览器中，因为浏览器中有它的解释器环境、基于谷歌浏览器v8引擎，使它可以在操作系统之上，网络包、文件、数据库。。。用C语言写的、js语法完成后端的编写、全栈，号称性能高、且大量使用协成。顺手补充一下各种编程语言类型

一、vue-cli创建项目

在终端下载先下载cnpm

# -g 表示装全局#--registry=https://registry.npm.taobao.org 指定淘宝镜像,# 因为国外网站下载速度贼慢因此换源解决了该问题npm install -g cnpm --registry=https://registry.npm.taobao.org

2. 再用cnpm下载vue-cli

cnpm install -g @vue/cli

现在可以创建Vue项目了记得选确定创建位置

# myfirstvue是项目名vue create myfirstvue# 如果发现速度太慢了需要Ctrl+C强制停止再输入以下命令即可npm cache clean --force

选择完就敲回车即可项目有第三方插件，以后都放到这个包里4. 创建完之后用pycharm打开该文件

之后运行有两种方式一是用终端命令行这时注意路径

npm run serve

二是用pycharm打开详见如下图运行之后有这个界面说明你已经成功运行你的第一个Vue项目

二、Vue项目目录介绍

三、es6导入导出语法

如果是Python，那就是创建包，在其他py文件中导入使用，js从es6开始也支持包的导入导出。默认导出语法(用的最多)，只能导出一个，一般导出一个对象。命名导出语法可以导出多个。那么接下来详细的介绍一下导入导出语法！

1.默认导入导出语法

"""如果想在外部包使用，必须导出，如果没导出，表示隐藏"""# 导出语法 一般是个对象export default

# 导入语法 别名就是导出的对象import 别名 from "路径"

2.命名导入导出语法

# 导出语法export const name = "almira"export const age = 18export const add = (a, b) => {    console.log(name)    return a + b}

# 导入语法import {name, add} from "./export_dir"console.log(name)console.log(add(33, 44))

四、Vue项目编写的步骤

以后只需要写XX.vue

页面组件小组件是个页面组件用的

组件中导出

export default {    name: "HelooWorld",    data(){        return {            xx: "almira"        }    },}

在别的组件中要用就导入、注册

# 导入import HelloWorld from "../components/HelloWorld.vue"

# 注册export default {    components: {        HelloWorld    }}

注册完在template组件中就可以使用导入的组件

五、前后端分离的登录功能

1.Vue前端部分

"""前后端分离了需要向后端发送请求 Vue用axios来发送请求 因此要下该模块"""cnpm install axios -S  # 带着-S会自动把当前依赖加入到package.json中

<script>import axios from "axios"export default {  name: "AboutView",  data() {    return {      username: "",      password: "",    }  },  methods: {    handleClick() {      console.log(this.username, this.password)      axios.post("http://127.0.0.1:8000/login/", {username: this.username, password: this.password}).then(res => {        alert(res.data.msg)      })    }  }}</script>

2.解决跨域的终极方法

# 1.在终端下载模块pip3 install django-cors-headers -i https://pypi.tuna.tsinghua.edu.cn/simple/

# 2.在配置文件注册APP"corsheaders"

# 3.中间件添加该配置"corsheaders.middleware.CorsMiddleware",

# 4.在配置文件里添加以下配置CORS_ORIGIN_ALLOW_ALL = TrueCORS_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","token")