Vue入门到关门之Vue项目工程化

最新推荐文章于 2024-10-29 10:06:15 发布
最新推荐文章于 2024-10-29 10:06:15 发布
阅读量1.4k 收藏 11
点赞数 41
分类专栏： Vue框架 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiao20000101/article/details/138357782
版权

一、创建Vue项目

1、安装node环境

在这里插入图片描述

2、搭建vue项目环境

  • 装cnpm 这个包，下载东西会快很多，装模块 cnpm替代npm，其他命令还是使用npm
npm install -g cnpm --registry=https://registry.npmmirror.com

在这里插入图片描述

  • 如果卡顿，或者一直失败，可以尝试以下两个解决方案
### 解决方案1：
// 1. 清空缓存
npm cache clean --force
// 2. 关闭SSL验证
npm config set strict-ssl false
// 3. 安装
到这里就可以正常使用npm命令安装需要的工具了。如(npm install -g cnpm   )

### 解决方案2：
// 1. 清空缓存
npm cache clean --force
// 2. 切换新源
npm config set registry https://registry.npmmirror.com
// 3. 查看源是否设置成功
npm config get registry
// 4. 安装
到这里就可以正常使用npm命令安装需要的工具了。如(npm install -g cnpm   )
  • 检测是否安装成功

在这里插入图片描述

3、安装vue脚手架

cnpm install -g @vue/cli

在这里插入图片描述

4、创建项目

（1） 装完脚手架，就会有个vue命令，通过vue命令创建vue项目

vue create myfirstvue # 按下面步骤
  • 选y

在这里插入图片描述

  • 选第三个，enter进入

在这里插入图片描述

  • 选下面三个，空格是选择或者取消，方向键控制上下

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

  • 创建成功

在这里插入图片描述

（2）命令行输入vue ui也可以创建项目

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

5、使用webstorm打开项目

在这里插入图片描述

6、运行项目

（1）在命令行中输入命令运行

  • 注意命令行的路径得是项目根路径，使用：
npm run serve
  • 默认terminal使用的是powershell，我们可以改成cmd来使用

在这里插入图片描述

在这里插入图片描述

  • 如果有下面这个启动错误

在这里插入图片描述

  • 解决方案

这个错是因为文件夹权限不够，不要将创建的Vue项目放到任意盘的program files文件夹里，不然永远是这个错误，因为那个文件夹不能设置为完全控制，所有肯定会报权限不够的错误。

解决方案就是将项目放入一个自定义文件夹即可

（2）配置webstorm，点绿色箭头执行

  • 新建一个npm命令用来执行执行 serve脚本

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

  • 启动成功的界面

在这里插入图片描述

在这里插入图片描述

二、vue项目目录结构

myfirstvue            # 项目名
	-node_modules     # 等同于python的venv--》虚拟环境-->里面有很多js，项目的依赖-》可以删除---》项目就不能运行了--》在你本地--》cnpm install--》根据package.json项目的依赖，再重新安装--》又可以运行了
    -public           # 文件夹，一般不动
        -favicon.ico  # 小图标
        -index.html   # spa--》单页面应用--》整个vue项目，就只有这一个html-如果禁用了js--》整个vue都用不了
     -src             # 文件夹---》核心代码
        -assets       #文件夹，都放静态文件--》图片，css，js。。。
        	-logo.png # 静态图片
        -components   # 小组件，给页面组件使用
            HelloWorld.vue # HelloWorld 组件
        -views        # 页面组件，页面跳转，实现像 html跳转一样的效果
            AboutView.vue # 关于页面
            HomeView.vue  # 首页
        -store            # vuex--》状态管理器
            index.js
        -router           # vue-router---》路由配置文件
            index.js
        -App.vue          # 根组件
		-main.js          # 整个项目入口
        
   -.gitignore      # git忽略文件，学了git就会了
   -babel.config.js # 装了bable配置文件--》把高版本es语法转成es5
   -jsconfig.json   # 不用管
   -package.json    # 项目依赖文件--》项目依赖--》npm install--》根据他装
   -package-lock.json # 锁定文件，之前项目中使用模块版本
   -README.md       # 项目介绍
   -vue.config.js   # vue整体配置文件

三、vue项目运行机制

  • main.js是整个项目入口文件
// main.js---> 指定了index.html---> id为app的div---> 根App.vue 这个组件做了关联

//es6 模块导入规范，等同于python导包
//commonJs的导入规范：var Vue=require('vue')
import Vue from 'vue'
import App from './App.vue'  //根组件
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)  // 代指 el
}).$mount('#app')


/*
new Vue({
	el:'#app' //原来是用el:'#app'，现在是new出Vue对象，挂载到#app上---》.$mount('#app')
  render: h => h(App) //原来是在页面上div中写样式，现在组件化开发 把根组件（import App from './App.vue'），通过render渲染上，渲染组件的方式
}).$mount('#app')
*/
  • vue文件大致模版（template、script、style）
<template>
    <!-- 模板区域 -->
</template>
<script>
    // 逻辑代码区域
    // 该语法和script绑定出现
  	//export default-->es6的默认导出（导出一个对象），模拟commonJS的导出方式制定的
    export default {
        
    }
</script>
<style scoped>
    /* 样式区域 */
    /* scoped表示这里的样式只适用于组件内部, scoped与style绑定出现 */
</style>
  • 组件写法
# template 写之前我们方在template标签的模版字符串
<template>
  <div id="app">
    <h1>我是根组件</h1>
    <button @click="haneldShow">点我弹alert</button>
  </div>
</template>

# script标签--》原来js代码都写在这里、
<script>
export default {
  name: 'HelloWorld', // 组件名字
  data() {
    return {}
  },
  methods: {
    haneldShow() {
      alert('111')
    }
  }
}
</script>


#style
<style>

button{
  background-color: aqua;
}
</style>
  • 定义组件
//1 新建xx.vue
components-->HelloWorld.vue
//2 引入使用
<script>
	// es6的引入import from 
  import HelloWorld from '@/components/HelloWorld.vue'
  import Vue from 'vue'
  Vue.component('HelloWorld',HelloWorld)  // 全局组件
  export default {
     components: {  // 局部组件
   		 HelloWorld:HelloWorld
  		},    
}
</script>

四、es6语法总结

1、let、const、var

在JavaScript中，let、const和var是用于声明变量的关键字，它们在作用域、可变性和提升等方面有一些重要的区别。 在ES6之前，我们都是用var来声明变量，而且JS只有函数作用域和全局作用域，没有块级作用域，所以{}限定不了var声明变量的访问范围。

ES6 新增了let命令，用来声明局部变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效，而且有暂时性死区的约束。

（1）var

  • var是ES5及之前版本中用于声明变量的关键字。
  • 使用var声明的变量存在函数作用域或全局作用域，而不存在块级作用域。
  • var声明的变量可以被重新赋值，并且可以在同一作用域内多次声明同一个变量。
  • var声明的变量会被提升（hoisting），即变量的声明会被提升到作用域的顶部，但赋值不会被提升。
  • 例如：
    var x = 10;
if (true) {
  var y = 20;
  console.log(x); // 可以访问 x
  console.log(y); // 可以访问 y
}
console.log(x); // 可以访问 x
console.log(y); // 可以访问 y，因为 var 变量会被提升

（2）let

  • let是ES6中引入的关键字，用于声明块级作用域的变量。
  • 使用let声明的变量可以被重新赋值，但不能在同一作用域内重新声明。
  • let声明的变量不会被提升，只有在声明后才能访问。
  • 例如：
    let x = 10;
if (true) {
  let y = 20;
  console.log(x); // 可以访问 x
  console.log(y); // 可以访问 y
}
console.log(x); // 可以访问 x
console.log(y); // 会报错，y 在块级作用域外不可访问

（3）const

  • const也是ES6中引入的关键字，用于声明常量，常量的值一旦赋值就不能再改变。
  • 常量必须在声明时进行初始化，且常量的值不可被重新赋值，但如果常量是对象或数组，对象或数组的属性或元素可以被修改。
  • const声明的变量也具有块级作用域。
  • 例如：
    const PI = 3.14;
// PI = 3.14159; // 这里会报错，常量不可重新赋值

const person = {
  name: 'Alice',
  age: 30
};
person.age = 31; // 这是允许的，因为对象的属性可以修改

（4）总结

  • 在现代JavaScript中，推荐优先使用const，如果变量的值需要变化，则使用let，避免使用var。
  • let和const提供了更好的变量声明方式，有助于代码的可读性和可维护性，同时避免了var可能导致的一些问题。
  • 使用let声明变量时，如果变量的值会发生变化，但不需要重新声明变量，可以使用let。
  • 使用const声明常量时，如果变量的值不会改变，可以使用const，这有助于提高代码的可读性和可维护性。

（5）补充

“暂时性死区”（Temporal Dead Zone，简称 TDZ）是指在 ES6 中使用 let 或 const 声明变量时，变量存在但无法访问的区域。这种行为是为了在 JavaScript 中引入块级作用域而设计的。

在 JavaScript 中，使用 var 声明的变量在其声明语句之前就可以被访问，这种行为称为"变量提升"。而在使用 let 或 const 声明变量时，变量虽然存在于作用域中，但是在声明语句之前访问这些变量会导致引发 ReferenceError 异常。

暂时性死区的产生原因是，let 和 const 声明的变量在进入作用域时就已经被创建，并且被绑定到了该作用域中，但是在变量的声明语句之前，访问这些变量会进入暂时性死区，因为此时变量尚未初始化

2、 箭头函数

（1）简化代码，使代码更简洁

（2）箭头函数内部，没有自己的this，它会使用上一级的this，解决了函数内部的this指向问题

（3）this指向问题：

  • 在全局上下文中，this 指向全局对象，在浏览器环境中通常是 window 对象，在 Node.js 中是 global 对象
console.log(this) # window 对象

  • 函数调用

    • 如果函数作为普通函数调用，this 指向全局对象（在严格模式下为 undefined）

    • 如果函数作为对象的方法调用，this 指向调用该方法的对象。

  • 构造函数

    • 在构造函数中，this 指向的是新创建的实例对象。

  • 箭头函数

    • 箭头函数的 this 指向定义时所在的作用域的 this 值，而不是调用时的 this 值。换句话说，箭头函数的 this 是词法作用域，而不是动态作用域。在传统的函数中，this的值是在函数被调用时确定的，根据调用方式不同可能指向不同的对象。但是在箭头函数中，this的值是在定义函数时确定的，它会捕获所在上下文的this值，而不是在运行时改变。这种行为可以避免在回调函数中出现意外的this指向问题，使得代码更加简洁和可读。

  • DOM 事件处理函数：

    • 在 DOM 事件处理函数中，this 指向触发事件的 DOM 元素

  • ES6 类方法：

    • 在 ES6 类方法中，this 指向调用该方法的对象实例

3、模版字符串

模板字符串是 JavaScript 中的一种特殊字符串，用反引号 ` （也称为反引号、重音符号或反引号字符）括起来。模板字符串可以包含多行文本和嵌入表达式，使用${}语法插入表达式。这使得在字符串中嵌入变量、表达式或函数调用变得更加方便。举个例子：

const name = 'Alice';
const greeting = `Hello, ${name}!`;

console.log(greeting); // 输出: Hello, Alice!

在上面的例子中，${name}是一个嵌入的表达式，它会被变量name的值替换掉。模板字符串的这种特性使得动态生成字符串变得更加简单和直观。

4、解构赋值

解构赋值是一种在 JavaScript 中方便地从数组或对象中提取数据并赋值给变量的语法。它可以让你快速地将数组或对象中的值解构到单独的变量中。

  • 解构赋值允许从数组或对象中提取数据，并将其赋值给变量。
  • 解构赋值可以方便地交换变量的值，同时还支持默认值。

（1）对象解构赋值

在对象解构赋值中，花括号{}里面放置的是要提取的属性名，而变量名则是接收对应属性值的变量名。

let user = {name: 'lqz', age: 19, hobby: '烫头'}
// 平常写法
let name=user.name
let age=user.age
// 解构赋值写法
let {name,age,hobby,a=10} = user

console.log(name,age,hobby,a)

（2）数组解构赋值

在数组解构赋值中，方括号[]里面放置的是要提取的元素位置，而变量名则是接收对应位置元素的变量名。同时**，...rest的语法表示将剩余的元素赋值给rest变量，这在需要获取数组中剩余元素时非常有用。**

const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers;

console.log(first); // 输出: 1
console.log(second); // 输出: 2
console.log(rest); // 输出: [3, 4, 5]

（3）解构函数返回值

function getuserInfo() {
    return {name: 'xiao', age: 19, hobby: ['烫头', '喝酒']}
}

let {name='1', hobby} = getuserInfo()
console.log(name, hobby)  // 如果内部修改，优先返回值中的值

5、默认参数

ES6 允许在函数参数中设置默认值，当调用函数时未提供参数时，将使用默认值

# 案例
function demo01(name,age=19) {
    console.log(name,age)
}
demo01('xiao')

6、展开运算

展开运算符 ... 可以将可迭代对象（如数组、字符串、对象）展开为多个参数或元素。也可以用于函数参数。

# 案例1：对象
let a={age:19,hobby:'打球'}
let user={name:'xiao',age:20,...a}
console.log(user)
'''
Object
    age: 19    # 以后面值为主
    hobby: "打球"
    name: "xiao"
'''

# 案例2：数组
let l=[1,2,3]
let l1=[44,55,66,...l]
console.log(l1)
# [44, 55, 66, 1, 2, 3]

# 案例3
function demo01(a,...b){
    console.log(a)
    console.log(b)
}
demo01(1,2,34,4)
'''
1
[2, 34, 4]
'''
let l=[44,5,66,7]
demo01(...l)
'''
44
[5, 66, 7]
'''

7、模块化

在以后，做项目开发的时候，肯定要导入某些模块使用:

  • 之前的前端是使用<script src=""></script>
  • 以后在项目中：import App from './App.vue' 语法引入

（1）默认导出和导入

默认导出 (Default Export)

默认导出允许一个模块只导出一个默认值。在一个模块中，你可以使用 export default 来导出默认值，然后在另一个模块中使用 import 语句来引入这个默认值。

示例:

// xiao/utils.js
var name = 'xiao'

function add(a, b) {
    console.log(name)
    return a + b
}

export default name  // 只导出变量
export default add   // 只导出函数
export default {name,add}  // 导出对象

export default {
    name:"彭于晏",
    add: (a,b)=>{
        return a+b
    }
}
导入默认导出

在导入默认导出时，你可以选择给导入的变量起一个名字，这个名字不必和导出时的名称相同。

<script type="module">
    // 相对导入，相对于当前文件
    import xiao from './xiao/utils'  
    
	// 绝对导入--》开始导入的路径  src路径，但是需要写个 @
    import xiao from '@/xiao/utils'
    
	console.log(utils.name)
    let res=utils.add(3,4)
    console.log(res)
</script>
注意事项
  • 一个模块只能有一个默认导出。
  • 在导入默认导出时，你可以选择使用任何合法的变量名。

默认导出适用于导出一个单一的值、对象、函数等，使得导入时更加简洁。

（2）命名导出和导入

在 JavaScript 中，除了默认导出之外，还有一种常用的导出方式是命名导出（Named Export）。命名导出允许一个模块导出多个变量、函数或对象，这些导出的内容可以在导入时通过名称引用。

命名导出 (Named Export)

使用命名导出时，你可以在一个模块中通过 export 关键字导出多个变量、函数或对象，然后在另一个模块中通过名称引入这些导出。

示例:

// xiao/utils.js
// 可以导出多个
export const age = 99
export const add = (a, b) => a + b
export const showName = name => {
    console.log(name)
}

export const obj={
    name:'xiao',
    show(){
        alert('show')
    }
}
导入命名导出

在导入命名导出时，需要使用花括号 {} 来指定要导入的内容，同时这些名称必须与导出时使用的名称相匹配。

// 第一种方式：花括号导入
import {age, add, showName} from '@/xiao/common'
import {showName, obj} from '@/xiao/common'
// 以后可以使用showName里面函数
// 以后可以使用obj的对象，又可以点obj.xx

// 第二种方式：*全部导入然后取别名
<script type="module">
    import * as xx from './xiao/utils.js'
    console.log(xx.add(8,9))
    console.log(xx.age)
</script>
注意事项
  • 一个模块可以有多个命名导出。
  • 在导入命名导出时，必须使用与导出时相同的名称。

命名导出适用于导出多个变量、函数或对象，使得模块的功能更加灵活和可扩展。

（3）如果在文件夹下有个index.js,只要导到文件夹一层即可

  • index.js就相当于python中的__init__，导入的时候可以不用带index.js
// 导出的是index.js
export default {
    name:'xiao',
    showAge:function (){
        console.log('age',this.name)
    },
    showName:()=>{
        console.log(this.name)
    },
    showHobby(){
        console.log('hobby',this.name)
    }
}

// 导入可以不用带index
<script type="module">
    // 命名导出的导入
    import xiao from '@/xiao/index'
    或者可以直接写成
    import xiao from '@/xiao'
    console.log('----',lqz.name)
    lqz.showAge()
    lqz.showHobby()
</script>

（4）vue项目中，组件的使用

  • 创建组件Child
<template>
  <div>
    <div class="top">
      <button>后退</button>
      <span @click="handleShow">{{ title }}</span>
      <button>前进</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Child',
  data() {
    return {
      title: '首页'
    }
  },
  methods: {
    handleShow() {
      alert('1111')
    }
  }
}
</script>


<style scoped>
.top {
  display: flex;
  justify-content: space-between;
}
</style>
  • 在其他组件中使用
<template>
  <div id="app">
    <h1>我是根组件</h1>
    <button>点我弹alert</button>
    <hr>
    <Child></Child>
  </div>
</template>
<script>
// @ 代指---》src文件夹
import Child from "@/components/Child.vue";
export default {
  name: 'HelloWorld',  // 组件名字
  components:{
    Child    // 注册局部组件
  }
}
</script>

<style>
button{
  background-color: aqua;
}
</style>

五、vue-router简单使用

单页面应用的字面意思就是只需要一个html页面就能实现页面跳转的效果，其本质就是组件的跳转。

那组件如何跳转？这就需要借助于第三方：vue-router 了

1、安装vue-router

（1）通过 npm 安装

  • 这是最常用的安装方式。安装完成后,你可以在代码中引入并使用 Vue Router。
npm install vue-router

（2）通过 CDN 引入

  • 你也可以通过 CDN 的方式引入 Vue Router,在 HTML 文件中添加以下代码:
  • 这种方式适合快速体验或在简单的项目中使用。
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

（3）通过 Vue CLI 安装

  • 如果你使用 Vue CLI 创建项目,在创建项目时可以选择安装 Vue Router。Vue CLI 会自动配置好 Vue Router 的基本设置。
vue create my-project
# 在创建项目时选择安装 Vue Router

但是如果你在创建vue项目的时候没有勾选router项，在这里可以按照第一种或者第二种方案进行安装。一般情况下,推荐使用 npm 安装的方式,因为这种方式可以更好地与构建工具(如 Webpack)集成,并且可以使用 ES6 语法。

2、App.vue写个标签

只需要在App.vue 写个标签，之后就不要再写任何其他东西了

<template>
<div id="app">
    <router-view>

    </router-view>
    </div>
</template>

3、在views里面创建页面组件

根据你的需求来创建不同的页面组件，为了下面的登录跳转案例，我在这里会创建IndexView LoginView两个页面组件，当登录成功时跳转到首页获取电影列表。

4、注册组件

接下来需要我们在在 router/index.js里面注册刚刚创建的页面组件

# 1 导入
    import LoginView from "@/views/LoginView";
    import IndexView from "@/views/IndexView";

    const routes = [
    # 2 注册路由
    {
        path: '/',
        name: 'home',
        component: IndexView
    },
    {
        path: '/login',
        name: 'login',
        component: LoginView
    },
]
    
# 4

5、完成

以后浏览器再次访问不同路径，就会根据不同的路由来切换相对应的页面组件

六、登录跳转案例

1、前期准备

（1）模块安装

  • 项目中使用axios 需要安装
cnpm install axios -S
  • 在要用的位置[注意导入的位置]，
# 导入
import axios from 'axios'
# 使用
axios.get().then()

（2）跨域问题的解决

  • 使用pip安装
pip3 install django-cors-headers
  • 添加到setting的app中
 INSTALLED_APPS = (
     ...
     'corsheaders',
     ...
 )
  • 添加中间件
MIDDLEWARE = [  
    ...
    'corsheaders.middleware.CorsMiddleware',
    ...
]
  • setting下面添加下面的配置
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',
    'token'
)

（3）前端页面组件跳转

  • 在登陆成功时跳转到首页时候使用
this.$router.push('router/index.js/在index.js中配置过的路径')

2、后端

（1）models.py

from django.db import models
from django.contrib.auth.models import AbstractUser

class UserInfo(AbstractUser):
    # user表扩写字段需要加default或者null=True
    gender = models.IntegerField(choices=((1, 'Male'), (2, 'Female'), (3, 'Other')), default=1)
    age = models.IntegerField(default=18)
    phone = models.CharField(max_length=11, null=True, blank=True)

（2）serializer.py

from rest_framework_simplejwt.serializers import TokenObtainPairSerializer

class LoginSerializer(TokenObtainPairSerializer):
    def validate(self, attrs):
        response = super().validate(attrs)
        user = self.user
        data = {'code': 100, 'msg': '登录成功','username': user.username,'gender': user.get_gender_display()}
        data.update(response)
        return data

（3）views.py

import json
from django.shortcuts import render
from rest_framework.response import Response
from rest_framework.views import APIView

class FilmView(APIView):
    def get(self, request):
        with open('./film.json', 'rt', encoding='utf-8') as f:
            res = json.load(f)
        return Response(res)

（4）urls.py

from django.contrib import admin
from django.urls import path
from rest_framework_simplejwt.views import token_obtain_pair
from app01 import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('login/', token_obtain_pair),
    path('film/',views.FilmView.as_view())
]

（5）settings.py

AUTH_USER_MODEL = 'app01.userinfo'

SIMPLE_JWT = {
    "TOKEN_OBTAIN_SERIALIZER": "app01.serializer.LoginSerializer",
}

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',
    'token'
)

REST_FRAMEWORK = {
    'EXCEPTION_HANDLER': 'app01.exceptions.common_exception_handler',
}

3、前端

（1）router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
// 导入
import LoginView from "@/views/LoginView.vue";
import IndexView from "@/views/IndexView.vue";


Vue.use(VueRouter)

const routes = [
    // 注册路由
    {
        path: '/',
        name: 'index',
        component: IndexView
    },
    {
        path: '/login',
        name: 'login',
        component: LoginView
    },
]

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

export default router

（2）LoginView.vue

<template>
  <div>
    <h1>登录</h1>
    <p>用户名：<input type="text" v-model="username"></p>
    <p>密码：<input type="password" v-model="password"></p>
    <p>
      <button @click="handleSubmit">登录</button>
    </p>
  </div>
</template>
<script>
import http from "axios"

export default {
  name: "LoginView",
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    handleSubmit() {
      // 发送ajax请求
      http.post('http://127.0.0.1:8000/login/', {
        username: this.username,
        password: this.password
      }).then(response => {
        if (response.data.code == 100) {
          // 跳转  vue-router支持的(重点)
          this.$router.push('/')
        } else {
          alert(response.data.msg)
        }
      })
    }
  }
}
</script>
<style scoped>
</style>

（3）IndexView.vue

<script>
import axios from 'axios'

export default {
  name: "IndexView",
  data() {
    return {
      filmList: []
    }
  },
  created() {
    axios.get('http://127.0.0.1:8000/film/').then(res => {
      this.filmList = res.data.results
    }).catch(err => {
      alert('请联系系统管理员')
    })
  }
}
</script>
<template>
  <div>
    <h1>首页</h1>
    <div v-for="film in filmList">
      <img :src="film.poster" alt="" height="200px" width="150px">
      <div>
        <h3>{{ film.name }}</h3>
        <p>主演：
          <span v-for="item in film.actors">
                {{ item.name }} &nbsp;&nbsp;
            </span>
        </p>
        <p>{{ film.nation }}|{{ film.runtime }}</p>
      </div>
    </div>
  </div>
</template>
<style scoped>
h1 {
  background-color: aquamarine;
}
</style>

七、scoped的使用

在 Vue.js 中，<style> 标签中的 scoped 属性用于将样式限定在当前组件的作用域内，避免样式污染和冲突。这样做可以确保样式只适用于当前组件，而不会影响其他组件。以后项目中的css样式，都会写在vue组件的<style>标签中。

以下是一个简单的示例，演示了如何在 Vue 组件中使用 scoped 属性：

<template>
  <div class="container">
    <h1>This is a scoped style example</h1>
    <p>This is a paragraph with scoped style.</p>
  </div>
</template>

<style scoped>
.container {
  background-color: lightblue;
  padding: 20px;
}

h1 {
  color: blue;
}

p {
  color: green;
}
</style>

在上面的示例中，<style scoped> 标签中的样式只会应用于当前组件内部的元素，而不会影响其他组件。这意味着即使你在其他组件中使用了相同的类名或标签名，也不会受到当前组件样式的影响。

八、问题

1、打开文件运行的流程

  • 在django的views.py 打开文件，打开文件的代码中写的文件路径，这个文件为什么要放在项目根路径？

因为真正运行的文件是manage.py，如果要打开文件，就得从项目运行的路径下开始找，而manage.py对应的正是项目根目录下。

class FilmView(APIView):
    def get(self, request):
        with open('./film.json', 'rt', encoding='utf-8') as f:
            res = json.load(f)
        return Response(res)

​

2、跨域问题

只要按照上面的处理跨域的步骤来写，以后不需要再响应头中加了允许跨域的键值对了，不论是post，还是delete，所有请求都没有跨域了

Xiao20000101
关注
专栏目录
工程化开发入门（Vue笔记三）
~
03-23 1649
主要介绍Vue工程化开发，包括脚手架的下载、安装及使用，项目运行流程，组件化开发&根组件等……是黑马程序员Vue2+Vue3第三天课程的笔记，可以在b站上看课程视频 BV1HV4y1a7n4
懂个锤子Vue 项目工程化
Java.慈祥
07-25 1169
node_modules/ # 存放项目的第三方依赖包public/ # 存放外部静态文件├── favicon.ioc # 网站图标├── index.html # 项目的入口 HTML 文件src/ # 项目的主要源码目录├── assets/ # 存放内部静态文件，如图片和字体图标├── components/ # 存放项目的公共组件└── HelloWorld.vue # 默认组件页面├── App.vue # 项目的主组件——>项目运行看到的内容就在这里编写。
Vue 工程化开发入门
dawn191228的博客
09-27 1076
工程化开发是一种将软件开发过程规范化、标准化的方法。对于 Vue 项目来说，工程化开发可以帮助我们更好地管理项目的结构、依赖关系、构建流程等。通过使用工具和技术，我们可以提高开发效率、降低维护成本，并确保项目的可扩展性和可维护性。Vue 的工程化开发为我们提供了一种高效、规范的开发方式。通过使用脚手架工具、遵循项目运行流程、进行组件化开发和组件注册，我们可以更好地管理和维护 Vue 项目。希望本文能够帮助你快速入门 Vue 工程化开发，开启你的 Vue 开发之旅。
Vue:vue的工程化
qq_55630615的博客
04-24 1481
即前端人员开发前端工程,将开发好的前端工程打包部署在前端服务器上后端开发人员开发后端工程,再将后端工程打包部署在后端服务器上,这种模式称为前后端分离开发而前后端要顺利对接的关键就是要遵循一定的开发规范。
【Vue基础】前端工程化Vue项目
qq_42294095的博客
04-16 1100
前端工程化Vue项目、NPM脚本
Vue 工程化项目
weixin_48183870的博客
05-19 1140
vue_test # 项目名-node_modules # 等同于python的venv虚拟环境-public # 不会被webpack处理的文件夹-favicon.ico # 小图标-index.html # 单页面应用，整个vue项目，就只有这一个html-src # 核心代码文件夹-assets # 静态资源文件夹-components # 可以重用的Vue组件-views # 页面组件，模仿页面跳转。
Vue工程化项目创建-VueCli与Vite
CharliePuthJJ的博客
03-07 1501
在完成了node.js的安装之后，我们就可以正式来创建我们的Vue工程化项目了，我目前学习到两个创建工程化项目的工具是Vue-Cli还有Vite，其中VueCli可用于创建vue2与vue3的项目，而Vite是比较新的，它只能创建vue3的工程化项目。以下为大家演示是用VueCli创建vue2还有Vite创建vue3，这也是我学习时所用到的。
Vue3工程化项目搭建
这魏先森-forguo
07-16 2088
Vue3工程化项目搭建，从工程化的角度带你来搭建一个vite+vue3+ts的前端项目
[Vue2]工程化
.
06-08 1110
基于Vue Cli自定义创建项目架子。
Vue项目入门学习
{竹子}
04-17 1583
一、环境 环境已经搭好，所以就不废话了，看一下我的版本 这已经是最新环境了。 二、创建项目 我们使用命令vue create创建，如下： vue create v1 提示说：请选择一个预设，预设就是项目的一些初始化，就是给你安装规定一些基本的东西，以前的低版本vue创建项目是用vue init webpack 【projectName] 命令，现在我们有了vue create，不再使用vue init了。 这里我们选择默认（Default（[Vue 3]）babel, eslint）。 复杂的创建项目
基于Vue的工程项目全寿期一体化综合管理系统设计源码
09-22
本项目是基于Vue开发的工程项目全寿期一体化综合管理系统，包含1095个文件，其中包括761个Vue组件文件、151个JavaScript脚本文件、92个PNG图像文件、35个CSS样式表文件、18个Markdown文档文件、12个LESS样式表文件、...
Vue项目组件化工程开发实践方案
11-27
在实际项目中，可以通过`npm link`将本地工程链接到项目中，简化部署过程。该方案的优势在于自动化程度高，减少了手动更新和配置的工作量，提高了开发效率。 总之，Vue项目组件化工程开发实践方案借助`vde-cli`实现...
基于Vue2的响应式大屏数据可视化项目源码.zip
08-10
2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载使用，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。...
TypeError: Cannot read property ‘parentNode‘ of undefined.
最新发布
DN金猿的博客
10-29 317
使用node js+vue+element plus开发。
vue如何让下拉框可以输入---查询下拉框内容
qq_42666729的博客
10-28 468
使用filterable。
Vue 关于路由
歌舞阿瓜的博客
10-26 586
路由
Vue3用户关注与粉丝列表展示
m0_74963840的博客
10-27 635
粉丝列表小组件
ssm智慧社区电子商务系统+vue
weixin_44832324的博客
10-28 1235
系统能否进行正常工作，功能模块能否实现，程序代码是否有错误，这些都需要通过系统测试来进行判断，测试是程序开发中必不可少的步骤，就算系统一步不差的被开发出来了，但进行测试时总能发现一个之前从没遇到过的问题[26]。在系统开发的整个过程当中都需要不断进行系统测试，根据经验发现，前期的一个小问题，将会酿成后期的一个大问题，所以越早发现，越早解决，才能保证后续的编码、测试和设计能够顺利进行。目前，系统测试所使用的方法主要是黑盒测试，系统测试的目的包括：根据客户的需求来设计用户界面；
Vue入门：简易表格实例与工程化开发详解
- 进阶到工程化开发，意味着采用Vue CLI（Command Line Interface）工具，这是一个基于Node.js的脚手架系统，用于初始化和管理Vue项目的构建过程。首先，需要安装Node.js和npm（Node包管理器），然后通过Vue CLI...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值