Nodejs的使用

1.安装nodejs服务器。

java 项目可以运行在 tomcat 服务器，开始完成前后端完全分离。前端有自己独立的工程。我们需

要把前端独立的工程运行起来。 --- 运行在 nodejs 服务器下。

理解为 tomcat 服务器

安装成功后在命令窗口查看

1.1 安装npm

java 项目需要依赖 jar ，安装 maven 。 前端项目需要依赖第三方的插件。比如 axios elementui

echarts 前端也需要一个管理组件的软件。 npm. 如果 package.json 文件 类似于 pom.xml 文件。

npm 通过该文件 package.json 文件安装依赖的插件。

如果安装了 node 默认 安装了 npm.

验证 :

npm -v

2. 安装vue cli的脚手架

帮你创建前端项目工程。它的安装需要依赖上面的npm

2.1 安装vue cli

npm install -g @vue/cli

-g: global 全局

验证是否安装成功 :

vue --version

3. 使用vuecli搭建vue前端项目

第一种使用命令 : vue create

第二种使用图形化界面： vue ui

3.1 安装相应的插件--elementui

安装插件有两种方式 :

第一种使用命令 : npm i element-ui -S

第二种使用图形化 :

2.2 安装axios依赖

发送异步请求的。

第一种命令 : npm i -S axios

第二种图形化 : 如下

4. 使用客户端软件打开vue工程

vscode [ 专业的前端工具 ]

webstorm [idea 团队开发的软件 -- 只要会使用 idea 那么也会使用该工具 ]

hbuilder [ 适合前端 ]

在 webstorm 中启动该项目

vue 原理

5. 组件化开发

组件化：一个页面可以拆分成一个个组件，每个组件有着自己独立的结构 [html] 、样式 [css] 、行为

[js] 。

好处：便于维护，利于复用 → 提升开发效率。

组件分类：普通组件、根组件。

比如：下面这个页面，可以把所有的代码都写在一个页面中，但是这样显得代码比较混乱，难易维

护。咱们可以按模块进行组件划分

6. 根组件 App.vue

1. 根组件介绍

整个应用最上层的组件，包裹所有普通小组件

2. 组件是由三部分构成

三部分构成

template ：结构 （有且只能一个根元素）

script: js 逻辑

style ： 样式 ( 可支持 less ，需要装包 )

让组件支持 less

（ 1 ） style 标签， lang="less" 开启 less 功能

（ 2 ） 装包 : yarn add less less-loader -D 或者 npm i less less-loader -D

7. 普通组件的注册使用

普通组件的注册有两种方式。

（ 1 ）局部注册：

（ 2 ）全局注册

  普通组件的注册使用 - 局部注册

1. 特点：

只能在注册的组件内使用

2. 步骤：

1. 创建 .vue 文件（三个组成部分）

2. 在使用的组件内先导入再注册，最后使用

3. 使用方式：

当成 html 标签使用即可 < 组件名 ></ 组件名 >

4. 注意：

组件名规范 —> 大驼峰命名法， 如 AAAHeader

5. 语法：

// 导入需要注册的组件
// import 组件对象 from '.vue文件路径'
import AAAHeader from './components/AAAHeader'
export default {• // 局部注册
components: {
'组件名': 组件对象,
AAAHeader:AAAHeader,
AAAHeader
}
}

  普通组件的注册使用 - 全局注册

1. 特点：

全局注册的组件，在项目的 任何组件 中都能使用

2. 步骤

1. 创建 .vue 组件（三个组成部分）

2. main.js 中进行全局注册

3. 使用方式

当成 HTML 标签直接使用

< 组件名 ></ 组件名 >

4. 注意

组件名规范 —> 大驼峰命名法， 如 AAAHeader

5. 语法

Vue.component(' 组件名 ', 组件对象 )

8. 组件通信

1. 什么是组件通信？

组件通信，就是指 组件与组件 之间的 数据传递

组件的数据是独立的，无法直接访问其他组件的数据。

想使用其他组件的数据，就需要组件通信

2. 组件之间如何通信

3. 组件关系分类

1. 父子关系

2. 非父子关系

5. 父子通信流程

1. 父组件通过 props 将数据传递给子组件 [ 重点 ]

2. 子组件利用 $emit 通知父组件修改更新

6. 父向子通信代码示例

父组件通过 props 将数据传递给子组件

父组件 App.vue

父向子传值步骤

1. 给子组件以添加属性的方式传值

2. 子组件内部通过 props 接收

3. 模板中直接使用 props 接收的值

9.路由介绍

9.1.思考

单页面应用程序，之所以开发效率高，性能好，用户体验好

最大的原因就是： 页面按需更新

比如当点击【发现音乐】和【关注】时， 只是更新下面部分内容 ，对于头部是不更新的

要按需更新，首先就需要明确： 访问路径 和 组件 的对应关系！

0. 子组件向父组件传值

1. 什么是路由

2. 如何配置路由

3. 路由传参

4. 前端访问后端代码

5 访问路径 和 组件的对应关系如何确定呢？ 路由

路由 : 就是路径和组件建立关联关系的过程。

9.2 vue中如何使用路径

我们刚才演示了路由的基本使用。 --- 通过在地址栏输入路由地址，在根据路由配置找到对应的组

件，并渲染该组件。

（ 1 ）第一种 : 声明式路径

<router-link to="/login">登录</router-link>&nbsp;&nbsp;&nbsp;&nbsp;

（ 2 ）第二种 : 编码式路径

methods:{
my(){
//路由跳转---编码式路由
this.$router.push("/register")
}
}

9.3. 路由传递

9.3.1 声明路由--查询参数

类似于之前 路由也是这种模式

对应的组件接受查询参数。

this.$route.query. 参数名

9.3.2 声明路由--动态路由参数

2. 路由配置时 : { path="/ 路由路径 /: 参数名 "}

3. 相应的组件中接受参数值 this.$route.params. 参数名

9.3.3 查询参数和动态路由参数

1. 查询参数传参 ( 比较适合传 多个参数 )

1. 跳转： to="/path? 参数名 = 值 & 参数名 2= 值 "

2. 获取： this.$route.query. 参数名

2. 动态路由传参 ( 优雅简洁 ，传单个参数比较方便 )

1. 配置动态路由： path: "/path/: 参数名 "

2. 跳转： to="/path/ 参数值 "

3. 获取： this.$route.params. 参数名

<router-link to="/login"> 登录 </router-link>    

1

methods:{

my(){

// 路由跳转 --- 编码式路由

this.$router.push("/register")

}

}

const originalPush = VueRouter.prototype.push

// 修改原型对象中的 push 方法

VueRouter.prototype.push = function push(location) {

return originalPush.call(this, location).catch(err => err)

}

5 注意：动态路由也可以传多个参数，但一般只传一个

准备传递参数 --- 查询参数和动态路由参数

9.3.4 编码路由--查询参数

my(){
//路由跳转---编码式路由
//简写版:
//this.$router.push("/my?name=ldh&age=18")
//完整版
this.$router.push({
path: "/my",
query:{
name:"张嘉琪",
age:88
},
})
}

接受：

created() {
this.name=this.$route.query.name;
this.age=this.$route.query.age;
}

9.3.5 编码路由--动态路由参数

//动态路由参数--简介版
// this.$router.push("/my/zcj")
this.$router.push(
{
// path:"/my", //表示路由的path的值
name:"My", //表示路由的名称
params:{
key:"wzy"
}
}
)
//path不能和params配合使用。 name可以和params配合使用

接受参数

//create()
created() {
this.name=this.$route.params.key;
// this.name=this.$route.query.name;
// this.age=this.$route.query.age;
}

当出现NavigationDuplicated: Avoided redundant navigation to current location: "/register".问题时

解决方案 : /router/index.js 添加如下代码 Vue-Router3.0

const originalPush = VueRouter.prototype.push
//修改原型对象中的push方法
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}