前端基础~

一. VUE

1. 基于脚手架创建前端工程

使用Vue CLI 创建前端工程：

法1：vue create 项目工程

创建一个存放vue 的文件，在文件上打开命令行窗口

选择使用vue 3 还是 vue 2 

法2：vue ui

在文件上打开命令行窗口

此时会打开项目仪表盘页面，打开Vue 项目管理器

创建vue 地址

创建项目名称及包管理器，vue 版本

2. 项目结构

3. 启动前端工程

首先使用 vscode 打开vue_demo-1 项目，在 terminal 中输入 npm run serve,最终是运行 vue-cli-service serve 代码

运行成功后点击Local 后的链接，如果想要停掉，Ctrl+C

        因为前端项目启动后的服务端口默认为8080，很容易和后端 tomcat 端口号冲突，所以要修改前端服务的端口号

在 vue.config.js 中配置前端服务端口号（ 改成7070 ）：

二. vue 基本使用方式

1. vue 包含三部分

结构 <template>、样式 <style>、逻辑 <script>

2. 文本插值

作用：用来绑定data 方法返回的对象属性

用法：{{}}

 3. 属性绑定

作用：为标签的属性绑定data 方法中返回的属性

用法：v-bind:XXX，简写为 :XXX

4. 事件绑定

作用：为元素绑定对应的事件

用法：v-on:XXX，简写为 @XXX

5. 双向绑定

作用：表单输入项和data 方法中的属性进行绑定，任意一方改变都会同步给另一方

用法：v-model

6. 条件渲染

作用：根据表达式的值来动态渲染页面元素

用法：v-if,v-else,v-else-if

7. axios

Axios 是一个基于promise 的网络请求库，作用于浏览器和 node.js 中

安装命令： npm install axios

导入命令：import axios form 'axios'

API列表：axios.get  .delete  .head  .options  .post  .put  .patch

启动tomcat服务器，但是跨域是失败的，请求登录不上，需要修改信息

handleSend(){

      //统一发送请求

      axios({

        url:'/api/admin/employee/login',

        method:'post',

        data:{

          username:'admin',

          password:'123456'

        }

      }).then(res=>{

        console.log(res.data.data.token)

        axios({

          url:'/api/admin/shop/status',

          method:'get',

          headers:{

            token:res.data.data.token

          }

        })

      })

    }

三. 路由 Vue-Router

vue 属于单页面应用，所谓路由，就是根据浏览器路径不同，用不同的视图组件替换这个页面内容

 1. 基于Vue CLI 创建带有路由功能的前端项目 (vue cli)

在选择vue版本的时候，选择手动创建，在功能中选择Router

2. vue 应用中如何实现路由

通过 vue-router 实现路由功能，需要安装js 库（npm install vue-router）

3. 路由配置

（1） 路由组成

VueRouter :路由器，根据路由请求在路由视图中动态渲染对应的视图组件

<router-link>:路由链接组件，浏览器会解析成<a>

<router-view>:路由视图组件，用来展示与路由路径匹配的视图组件

（2） 跳转方式

标签式：<router-link to="/about"> About</router-link>

编程式：this.$router.push('/about')

4. 嵌套路由

        组件内要切换的内容，要用到嵌套路由（子路由）

（1） 实现步骤

element官网 vue2：组件 | Element

vue 3:Overview 组件总览 | Element Plus

如果使用 vue 3，按照官网中的步骤安装 element 会 error

建议使用 npm install element-plus --save 命令

导入element-ui 在main.js

import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import App from './App.vue';

const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

使用 element-ui ： Vue.use(ElementUI);

vscode 格式化代码快捷键：shift+alt+F

四. vuex 状态管理

1 介绍

​

​

2 使用方式

创建一个vuex 的项目,手动配置项目

​

​

​

（1）index.js

import { createStore } from 'vuex'
import axios from 'axios'

//集中管理多个组件共享的数据
export default createStore({
  // 集中定义共享数据
  state: {
    name:'未登录游客'
  },
  getters: {
  },
  // 修改共享数据只能通过mutation实现，必须是同步操作
  mutations: {
    setName(state,newName){
      state.name=newName
    }
  },
  // 通过action 可以调用到 mutations ，在actions中可以进行异步操作
  actions: {
    setNameByAxios(context){
      axios({
        url:'/api/admin/employee/login',
        method:'post',
        data:{
          username:'admin',
          password:'123456'
        }
      }).then(res=>{
        if(res.data.code==1){
          // 异步请求后，需要修改共享数据
          // 在actions 中调用mutation 中定义的setName 函数
          context.commit('setName',res.data.data.name)
        }
      })
    }
  },
  modules: {
  }
})

(2)App.vue

<template>
  <input type="button" value="通过mutations修改共享数据" @click="handleUpdate"/>
  <input type="button" value="调用actions 中定义的函数" @click="handleCallAction"/>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  methods:{
    handleUpdate(){
      // mutations中定义的函数不能直接调用，必须通过这种方式调用
      // setName 为 mutations 中定义的函数名称，lisi 为传递的参数
      this.$store.commit('setName','lisi')
    },
    handleCallAction(){
      // 调用actions中定义的函数，setNameByAxios 为函数名称
      this.$store.dispatch('setNameByAxios')
    }
  }
}
</script>

(3) HelloWord.vue

<template>
  <div class="hello">
    <h1>欢迎你，{{ $store.state.name }}</h1>

  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

五. TypeScript

1. 介绍

安装：npm install -g typescript

查看：tsc -v

编译：tsc 文件名.ts

运行：node 文件名.js

2. TS 为什么要增加类型支持？

3.  常用类型

创建项目

编写.ts文件

// 字符串类型
let username:string='sun'

// 数字类型
let age:number=20

// 布尔类型
let isTrue:boolean=true

console.log(username)
console.log(age)
console.log(isTrue)

// 字面量类型
function printText(s:string,alignment:'left'|'right'|'center'){
    console.log(s,alignment)
}

printText('hello','left')


// 定义接口
interface Cat{
    name:string,
    age:number,
    sex?:string  // ? 表示可选
}
// 定义变量，并指定为Cat 类型
const c1:Cat={name:'小白',age:20,sex:'男'}
const c2:Cat={name:'小白',age:20}

console.log(c1)
console.log(c2)

// 定义一个类,使用class 关键字
class User{
    name:string; //指定类中的属性
    constructor(name:string){  //定义构造方法
        this.name=name
    }

    //方法
    study(){
        console.log(this.name+'在学校')
    }
}

// 使用User类型
const user=new User('张三')
// 调用类中方法
user.study()


// 定义接口
interface Animal{
    name:string
    eat():void
}

// 定义一个类，实现上面的接口
class Bird implements Animal{
    name: string
    constructor(name:string){
        this.name=name
    }
    eat(): void {
        console.log(this.name+'eat')
    }
}
//创建类型为Bird的对象
const b1=new Bird('燕子')
console.log(b1.name)
b1.eat()

// 定义Parrot 类，继承Bird 类
class Parrot extends Bird{
    say(){
        console.log(this.name+' say hello')
    }
}

const myParrot=new Parrot('Polly')

myParrot.eat()
myParrot.say()
console.log(myParrot.name)

如果要永久修改执行策略，可以使用以下命令（需要管理员权限）：

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

说明：

• RemoteSigned：允许本地脚本运行，但远程脚本必须经过签名。
• 如果需要恢复默认，可以将执行策略改回 Restricted：

  Set-ExecutionPolicy -ExecutionPolicy Restricted -Scope CurrentUser

运行