【Java-SpringBoot+Vue+MySql】Day5-前端进阶-Toy模板网

这篇具有很好参考价值的文章主要介绍了【Java-SpringBoot+Vue+MySql】Day5-前端进阶。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、Axios网络请求

中文文档：

安装：

导入：

使用方法：

基本语法：

生命周期函数：

二、前端路由VueRouter

视频：12.前端路由VueRouter_哔哩哔哩_bilibili

安装：

声明路由链接和占位标签

创建路由模块

路由重定向

动态路由

路由守卫

参考文档:

三、状态管理VueX

视频：13.状态管理VueX_哔哩哔哩_bilibili

State

Getter

Mutation

参考文档:

四、前端数据模拟MockJS

视频：14.前端数据模拟MockJS_哔哩哔哩_bilibili

参考文档:

五、JWT跨域认证

视频：16.JWT跨域认证_哔哩哔哩_bilibili

pom.xml

JwtUtils类

Result类

ResultCode接口类

UserController类

参考文档:

六、后台前端解决方案

官网文档：介绍 | vue-element-admin

七、部署

视频：18.阿里云服务器使用_哔哩哔哩_bilibili

参考文档：

一、Axios网络请求

【Java-SpringBoot+Vue+MySql】Day5-前端进阶

中文文档：

起步 | Axios 中文文档 | Axios 中文网

安装：

npm install axios

导入：

可以在任意组件中通过import导入。

import axios from 'axios'

使用方法：

基本语法：

【Java-SpringBoot+Vue+MySql】Day5-前端进阶

生命周期函数：

每个组件都有生命周期，同时也有生命周期函数，这些函数在script中是与data、method同级的。created()：（组件创建时调用）

  created:function(){
    console.log("Vue组件被创建！");
  },

在每个组件里写一个created函数，打开网页控制台，可以看到（在组件创建时）打印出每个组件里的消息。

【Java-SpringBoot+Vue+MySql】Day5-前端进阶

mounted()：（组件挂载时调用）

  mounted:function(){
    console.log("Vue组件挂载完毕！");
  },

【Java-SpringBoot+Vue+MySql】Day5-前端进阶

注意前后端同时启动时不能占用同一个端口!!!

前端默认占用8080端口，

【Java-SpringBoot+Vue+MySql】Day5-前端进阶

那么我们将后端端口改为8088

【Java-SpringBoot+Vue+MySql】Day5-前端进阶

这样就可以同时启动了。

访问浏览器

http://localhost:8088/user/findAll

可以看到后端传递来的数据

【Java-SpringBoot+Vue+MySql】Day5-前端进阶

前端在created函数里使用axios接收后端网络请求：

Table.vue

  import axios from "axios"
created:function(){
        axios.get("http://localhost:8088/user/findAll").then(function(response){//回调函数
            console.log(response)
        })
      },

但是访问会发生错误：

……has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

这就是跨域问题导致的。

【Java-SpringBoot+Vue+MySql】Day5-前端进阶

解决跨域问题直接在SpringBoot的控制器中加上注解：@CrossOrigin

或者在配置包里创建配置类实现全局可跨域

【Java-SpringBoot+Vue+MySql】Day5-前端进阶

重启后端，刷新前端，我们拿到了正常的从后端传递来的数据

【Java-SpringBoot+Vue+MySql】Day5-前端进阶

将返回的data渲染到界面

将response.data传给script模块中的data

使用箭头函数继承了父级的作用域

Table.vue

<template>
    <el-table
      :data="tableData"
      style="width: 100%"
      max-height="250">
     
      <el-table-column
        prop="birthday"
        label="出生日期"
        width="300">
      </el-table-column>

  

      <el-table-column
        prop="username"
        label="用户名"
        width="300">
      </el-table-column>

      <el-table-column
        prop="password"
        label="用户密码"
        width="300">
      </el-table-column>

      <el-table-column
        fixed
        prop="id"
        label="用户ID"
        width="100">
      </el-table-column>

      <el-table-column
        fixed="right"
        label="操作"
        width="120">
        
          <el-button
            @click.native.prevent="play()"
            type="text"
            size="small">
            详情
          </el-button>
        
      </el-table-column>
    </el-table>
  </template>
  


  <script>

import axios from "axios"

    export default {
      methods: {
        play(){
          alert("^V^")
        }
      },
      created:function(){
        axios.get("http://localhost:8088/user/findAll").then((response)=>{//回调函数
            this.tableData = response.data
        })
      },
      data() {
        
        return {
          value: null,
          texts:['1分','2分','3分','4分','5分',],
          tableData: []
        }
      }
    }
  </script>

【Java-SpringBoot+Vue+MySql】Day5-前端进阶

main.js

import axios from 'axios'//导入

axios.defaults.baseURL="http://localhost:8088"//设置后端接口

Vue.prototype.$http = axios//定义属性$http并挂载到Vue

Table.vue修改部分

 created:function(){
        this.$http.get("/user/findAll").then((response)=>{//回调函数
            this.tableData = response.data
        })
      },

效果不变：

【Java-SpringBoot+Vue+MySql】Day5-前端进阶

二、前端路由VueRouter

视频：12.前端路由VueRouter_哔哩哔哩_bilibili

【Java-SpringBoot+Vue+MySql】Day5-前端进阶 Vue路由vue-router是官方的路由插件，能够轻松的管理 SPA 项目中组件的切换。 Vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。

通过路由，我们可以给组件设置不同的路径来进行访问。

官网：Vue Router

安装：

vue2使用@3，vue3使用@4

npm install vue-router@3

在项目中定义 Discover.vue、Friends.vue、My.vue 三个组件，将来要使用 vue-router 来控制它们的
展示与切换：

Discover.vue：

<template>
    <div>
        <h1>
            发现
        </h1>
    </div>
</template>

Friends.vue:

<template>
    <div>
        <h1>
            关注
        </h1>
    </div>
</template>

My.vue:

<template>
    <div>
        <h1>
            我的
        </h1>
    </div>
</template>

声明路由链接和占位标签

可以使用 <router-link> 标签来声明路由链接，并使用 <router-view> 标签来声明路由占位符。示例
代码如下：
App.vue：

<template>
<div>
<h1>APP组件</h1>
<!-- 声明路由链接 -->
<router-link to="/discover">发现音乐</router-link>
<router-link to="/my">我的音乐</router-link>
<router-link to="/friends">关注</router-link>
<!-- 声明路由占位标签 -->
<router-view></router-view>
</div>
</template>

创建路由模块

在项目中创建 index.js 路由模块，加入以下代码：

import VueRouter from 'vue-router'
import Vue from 'vue'
import Discover from '@/components/Discover.vue'
import Friends from '@/components/Friends.vue'
import My from '@/components/My.vue'
//将VueRouter设置为Vue的插件
Vue.use(VueRouter)

const router = new VueRouter({
    // 指定hash属性与组件的对应关系
    routes: [
    { path: '/discover', component: Discover },
    { path: '/friends', component: Friends },
    { path: '/my', component: My },
    ]
    })
    export default router//导出

在index.js导出后，在main.js里进行导入

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import 'font-awesome/css/font-awesome.min.css';
import axios from 'axios'//导入
import router from './router'//index.js默认导入，其他名字要补全


axios.defaults.baseURL="http://localhost:8088"//设置后端接口

Vue.prototype.$http = axios//定义属性$http并挂载到Vue

Vue.config.productionTip = false
Vue.use(ElementUI);

new Vue({
  render: h => h(App),
  router//等价于 router:router，因为属性名和值相同
}).$mount('#app')

启动项目可以看到通过点击链接可以调用不同的路由组件的页面

：http://localhost:8080/#/discover 【Java-SpringBoot+Vue+MySql】Day5-前端进阶

路由重定向

路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面。通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向：

import VueRouter from 'vue-router'
import Vue from 'vue'
import Discover from '@/components/Discover.vue'
import Friends from '@/components/Friends.vue'
import My from '@/components/My.vue'
//将VueRouter设置为Vue的插件
Vue.use(VueRouter)

const router = new VueRouter({
    // 指定hash属性与组件的对应关系
    routes: [
    // 当用户访问 / 时，跳转到 /discover
    { path: '/', redirect: '/discover'},
    { path: '/discover', component: Discover },
    { path: '/friends', component: Friends },
    { path: '/my', component: My },
    ]
    })
    export default router

这样我们每次进入首页都会自动跳转到发现页面

【Java-SpringBoot+Vue+MySql】Day5-前端进阶

在 Discover.vue 组件中，声明 toplist和 playlist的子路由链接以及子路由占位符。示例代码如下：

<template>
    <div>
        <h1>
            发现
        </h1>
        <router-link to="/discover/toplist">推荐</router-link>
        <router-link to="/discover/playlist">歌单</router-link>
        <hr>
        <router-view></router-view>
    </div>
</template>

在创建两个组件toplist.vue和playlist.vue,并在index.js下配置子路由

import VueRouter from 'vue-router'
import Vue from 'vue'
import Discover from '@/components/Discover.vue'
import Friends from '@/components/Friends.vue'
import My from '@/components/My.vue'
import toplist from '@/components/toplist.vue'
import playlist from '@/components/playlist.vue'
//将VueRouter设置为Vue的插件
Vue.use(VueRouter)

const router = new VueRouter({
    // 指定hash属性与组件的对应关系
    routes: [
        { path: '/', redirect: '/discover'},
        {
            path: '/discover',
            component: Discover,
            // 通过children属性，嵌套声明子路由
            children: [
                {path:"toplist",component:toplist},
                {path:"playlist",component:playlist},
            ]
        },
        { path: '/friends', component: Friends },
        { path: '/my', component: My },
        //{ path: '/discover/toplist', component: TopList },
        //{ path: '/discover/playlist', component: playlist },
        ]
    })

export default router

【Java-SpringBoot+Vue+MySql】Day5-前端进阶

动态路由

【Java-SpringBoot+Vue+MySql】Day5-前端进阶

创建Producet.vue组件

<template>
    <h3>商品</h3>
</template>

在My组件中引入商品路由

<template>
    <div>
        <h1>
            我的
        </h1>
        <router-link to="/my/1">商品1</router-link>
        <router-link to="/my/2">商品2</router-link>
        <router-link to="/my/3">商品3</router-link>    
        <router-view></router-view>
    </div>
</template>

在index.js中配置/my的子路由

import VueRouter from 'vue-router'
import Vue from 'vue'
import Discover from '@/components/Discover.vue'
import Friends from '@/components/Friends.vue'
import My from '@/components/My.vue'
import toplist from '@/components/toplist.vue'
import playlist from '@/components/playlist.vue'
import Product from '@/components/Product.vue'
//将VueRouter设置为Vue的插件
Vue.use(VueRouter)

const router = new VueRouter({
    // 指定hash属性与组件的对应关系
    routes: [
        { path: '/', redirect: '/discover'},
        {
            path: '/discover',
            component: Discover,
            // 通过children属性，嵌套声明子路由
            children: [
                {path:"toplist",component:toplist},
                {path:"playlist",component:playlist},
            ]
        },
        { path: '/friends', component: Friends },
        { path: '/my', component: My ,
            children:[
                { path: ':id', component: Product }
                // { path: '/product/1', component: Product },
                // {path: '/product/2', component: Product },  
                // { path: '/product/3', component: Product },
                
            ]
            
        },
        //{ path: '/discover/toplist', component: TopList },
        //{ path: '/discover/playlist', component: playlist },
        ]
    })

export default router

可以看到，点击不同的商品会跳转到不同的路由都指向Product组件界面，而动态路由的写法将我们原本的三行代码压缩到了两行

【Java-SpringBoot+Vue+MySql】Day5-前端进阶

获取动态id值

<template>
    <h3>商品<!-- 获取动态的id值 -->
<p>{{$route.params.id}}</p></h3>
</template>

【Java-SpringBoot+Vue+MySql】Day5-前端进阶

另外一种传值的方式是通过属性传值

<template>
    <h1>商品{{ id }}</h1>
</template>

<script>
    export default{
        props:["id"]
    }
</script>

index.js也要表明属性传值的参数

{ path: ':id', component: Product, props:true }

路由守卫

（类似拦截）

导航守卫可以控制路由的访问权限。示意图如下：
全局导航守卫会拦截每个路由规则，从而对每个路由进行访问权限的控制。
你可以使用 router.beforeEach 注册一个全局前置守卫：

router.beforeEach((to, from, next) => {
if (to.path === '/main' && !isAuthenticated) {
next('/login')
}
else {
next()
}
})

【Java-SpringBoot+Vue+MySql】Day5-前端进阶

参考文档:

链接：https://pan.baidu.com/s/1AM7UYhR32uUMuIJnalVAyg
提取码：9p1f
--来自百度网盘超级会员V3000的分享

三、状态管理VueX

视频：13.状态管理VueX_哔哩哔哩_bilibili

官方文档： Vuex 是什么？ | Vuex

安装：

vue2对应版本vuex@3

vue3对应版本vuex@4

npm install vuex@3

新建文件夹store下新建index.js

import Vue from "vue";
import vuex from 'vuex'
Vue.use(vuex)

// 创建一个新的 store 实例
const store = new({
    state () {
      return {
        count: 0
      }
    },
    mutations: {
      increment (state) {
        state.count++
      }
    }
  })
  
export default store//将store对象导出

在main.js中导入

import store from './store'//index.js可以省略


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

State

在HelloWorld.vue组件中导入store数据并进行操作

<template>
  <div class="hello">
    {{ this.$store.state.count }}
    <button @click="add">+1</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  methods:{
    add(){
      //this.$store.state.count =this.$store.state.count + 1;
      this.$store.commit("increment")
    }
  }
}
</script>

【Java-SpringBoot+Vue+MySql】Day5-前端进阶

也有更简单的写法，使用计算属性

<template>
  <div class="hello">
    {{ count }}
    <button @click="add">+1</button>
  </div>
</template>

<script>


export default {
  name: 'HelloWorld',
  computed: {
    count () {
      return this.$store.state.count
    }
  },
  methods:{
    add(){
      //this.$store.state.count =this.$store.state.count + 1;
      this.$store.commit("increment")
    }
  }
}
</script>

或者用mapState(导入函数)

<template>
  <div class="hello">
    {{ count }}
    <button @click="add">+1</button>
  </div>
</template>

<script>
// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'

export default {
  name: 'HelloWorld',
  computed: mapState([
  // 映射 this.count 为 store.state.count
  'count'
]),
  methods:{
    add(){
      //this.$store.state.count =this.$store.state.count + 1;
      this.$store.commit("increment")
    }
  }
}
</script>

Getter

index.js添加列表

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0,
    todos: [
        { id: 1, text: '111', done: true },
        { id: 2, text: '222', done: false }
      ]
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})
export default store

HelloWorld.vue显示

<template>
  <div class="hello">
    {{ count }}
    <button @click="add">+1</button>
    <ul>
      <li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
    </ul>
  </div>
</template>

<script>
// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'

export default {
  name: 'HelloWorld',
  computed: mapState([
  // 映射 this.count 为 store.state.count
  'count','todos'
]),
  methods:{
    add(){
      //this.$store.state.count =this.$store.state.count + 1;
      this.$store.commit("increment")
    }
  }
}
</script>

【Java-SpringBoot+Vue+MySql】Day5-前端进阶

过滤数据

index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0,
    todos: [
        { id: 1, text: '111', done: true },
        { id: 2, text: '222', done: false }
      ]
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  getters: {
    // ...
    doneTodos: (state) =>  {
      return state.todos.filter(todo => todo.done)
    }
  }
}
)
export default store

HelloWorld.vue

<template>
  <div class="hello">
    {{ count }}
    <button @click="add">+1</button>
    <ul>
      <li v-for="todo in doneTodos" :key="todo.id">{{ todo.text }}</li>
    </ul>
  </div>
</template>

<script>
// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState,mapGetters } from 'vuex'

export default {
  name: 'HelloWorld',
  computed: {
    ...mapState([
      'count',
      'todos',
      // ...
    ]),
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodos',
      // ...
    ]),

  },
  methods:{
    add(){
      //this.$store.state.count =this.$store.state.count + 1;
      this.$store.commit("increment")
    }
  }
}
</script>

【Java-SpringBoot+Vue+MySql】Day5-前端进阶

Mutation

提交载荷（函数参数）

  mutations: {
    increment (state, n) {
        state.count += n
      }
  },

methods:{
    add(){
      //this.$store.state.count =this.$store.state.count + 1;
      this.$store.commit("increment",2)
    }
  }

【Java-SpringBoot+Vue+MySql】Day5-前端进阶

参考文档:

链接：https://pan.baidu.com/s/1cIUW0aV830wsmgzOK8PCuQ
提取码：ohwp
--来自百度网盘超级会员V3000的分享

四、前端数据模拟MockJS

【Java-SpringBoot+Vue+MySql】Day5-前端进阶

视频：14.前端数据模拟MockJS_哔哩哔哩_bilibili

参考文档:

链接：https://pan.baidu.com/s/1hiZxbbSndy0hzo0Cxm7gOg
提取码：zhsn
--来自百度网盘超级会员V3000的分享

五、JWT跨域认证

视频：16.JWT跨域认证_哔哩哔哩_bilibili

【Java-SpringBoot+Vue+MySql】Day5-前端进阶

pom.xml

【Java-SpringBoot+Vue+MySql】Day5-前端进阶

JwtUtils类

【Java-SpringBoot+Vue+MySql】Day5-前端进阶

Result类

【Java-SpringBoot+Vue+MySql】Day5-前端进阶

ResultCode接口类

【Java-SpringBoot+Vue+MySql】Day5-前端进阶

UserController类

【Java-SpringBoot+Vue+MySql】Day5-前端进阶

参考文档:

链接：https://pan.baidu.com/s/1TGeMS_7pfFbJPi4RTzTLvQ
提取码：e7vg
--来自百度网盘超级会员V3000的分享

六、后台前端解决方案

官网文档：介绍 | vue-element-admin

Github：GitHub - PanJiaChen/vue-admin-template: a vue2.0 minimal admin template 【Java-SpringBoot+Vue+MySql】Day5-前端进阶

【Java-SpringBoot+Vue+MySql】Day5-前端进阶

在项目文件下输入cmd进入命令窗输入指令下载：

# clone the project
git clone https://github.com/PanJiaChen/vue-admin-template.git

# enter the project directory
cd vue-admin-template

#使用淘宝镜像源
npm install --registry=https://registry.npm.taobao.org

# install dependency
npm install

# develop
npm run dev

运行一下，还是很香的

http://localhost:9528/#/login?redirect=%2Fdashboard

【Java-SpringBoot+Vue+MySql】Day5-前端进阶

七、部署

视频：18.阿里云服务器使用_哔哩哔哩_bilibili

参考文档：

链接：https://pan.baidu.com/s/1G3fNqoJ8YFlxe0nNqeTmFg
提取码：t381
--来自百度网盘超级会员V3000的分享

本次学习笔记已全部整理完毕，由于时间原因，后面没有总结完全，但是老师给的文档记录详细，结合视频教程事半功倍，接下来我将准备项目实战。感谢老师的教导，真的学到了很多！同时感谢评论区的大神指点迷津。

参考链接：

1天搞定SpringBoot+Vue全栈开发_哔哩哔哩_bilibili

Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.文章来源地址https://www.toymoban.com/news/detail-497961.html

到了这里，关于【Java-SpringBoot+Vue+MySql】Day5-前端进阶的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！