前端项目构建

最新推荐文章于 2024-08-03 17:33:50 发布

卷Java

最新推荐文章于 2024-08-03 17:33:50 发布

阅读量223

点赞数

文章标签：前端 spring boot

本文链接：https://blog.csdn.net/weixin_45495161/article/details/134344154

版权

前端项目构建

一、前端知识回顾

1.1、创建前端脚手架前端工程

利用命令行create vue 项目名称 创建项目

注：一定要在要创建的文件项目目录下进行使用

利用vue CLI命令行是vue ui可视化界面创建项目

node_modules：当前项目依赖的js包
assets：静态资源存放目录
components：公共组件存放目录
App.vue：项目的主组件，页面的入口文件
main.js：整个项目的入口文件
package.json：项目的配置信息、依赖包管理
vue.config.js：vue-cli配置文件

启动vue项目采用命令行npm run serve
为了解决与后端项目端口有发生冲突，修改vue的端口号，vue.config.js文件中添加如下代码

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 7070  //这里可以随机修改端口号
  }
})

1.2、Vue的基本使用

1.2.1、vue基本使用方式 – vue 组件

<template>标签中的内容会转为<a>内容，显示在html页面中的内容
<style>标签中的内容是一些样式内容
<script>标签中的内容是写一些js代码，逻辑代码

1.2.2、vue基本使用方式 –文本插值

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

用法：{{xxx}}

<template>
    <div>
        <h1>{{ name }}</h1>
        <h1>{{ age > 60 ? '老年' : '青年' }}</h1>
    </div>
</template>
<script>
    export default {
        data() {
            return { name: '张三', age: 30 };
        }
    };
</script>

1.2.3、vue基本使用方式 –属性绑定

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

用法：v-bind:xxx,简写:xxx

<template>
    <div>
        <div><input type="text" v-bind:value="name"></div>
        <div><input type="text" :value="age"></div>
        <div><img :src="url"/></div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            name: '王五',
            age: 20,
            src: 'https://www.itcast.cn/2018czgw/images/logo2.png'
        };
    }
}
</script>

1.2.4、vue基本使用方式 –事件绑定

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

用法：v-on:xxx,简写@xxx

<template>
    <div>
      <div>
        <input type="button" value="保存" v-on:click="handleSave"/>
        <input type="button" value="保存" @click="handleSave"/><br>
      </div>
    </div>
  </template>
<script>
export default {
    data(){ return { name: ‘张三’}
    },
    methods: {
        handleSave(){
            alert(this.name)
        }
    }
}
</script>

1.2.5、vue基本使用方式 –双向绑定

作用：表单输入项和data返回的属性值进行绑定，任何一个修改都会同步给另外一方

用法：v-model:xxx

<template>
    <div>
        <div>
            双向绑定：{{ name }}
            <input type="text" v-model="name" />
            <input type="button" value="改变" @click="handleChange"/>
        </div>
    </div>
  </template>
<script>
export default {
    data(){return {name: '张三'}
    },
    methods: {
        handleChange(){
            this.name = '李四'
        }
    }
}
</script>

1.2.6、vue基本使用方式 –条件渲染

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

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

<template>
    <div>
        <div v-if="sex == 1">
            男
        </div>
        <div v-else-if="sex == 2">
            女
        </div>
        <div v-else>
            未知
        </div>
    </div>
  </template>
  
<script>
export default {
    data(){
        return {sex: 1}
    }
}
</script>

1.2.7、vue基本使用方式 –axios

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

安装命令

npm install axios

导入命令

import axios from 'axios'

axios的请求列表

问题：若采用上述方式发送get请求或者post请求的时候容易发生跨域问题

解决方案：1) 在vue.config.js文件中添加如下代码

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 7070,
    proxy: {
      '/api': {  //遇到/api才会触发以下的代理
        target: 'http://localhost:8080', //代理的目的地址
        pathRewrite: { //重写地址
          '^/api': '' //将axios中的地址/api换成空
        }
      }
    }
  }
})

2)直接配置nginx

axios的post、get请求

axios.post('/api/employee/login',{
      username:'admin',
      password: '123456'
    }).then(res => {
      console.log(res.data)
    }).catch(error => {
      console.log(error.response)
    })
axios.get('/api/admin/shop/status',{
        headers: {
          token: ‘xxx.yyy.zzz’
        }
      })

axios的统一方式axios(config)

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',
        params: {id: 100},
        headers: {
          token: res.data.data.token
        }
      })
    }).catch((error) => {
      console.log(error)
    })