IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 谷粒学院--你的第一个前后端分离项目(斗之气) -> 正文阅读

[JavaScript知识库]谷粒学院--你的第一个前后端分离项目(斗之气)

一、项目简介

在线教育平台

在线教育顾名思义,是以网络为介质的教学方式,通过网络,学员与教师即使相隔万里也可以开展教学活动;此外,借助网络课件,学员还可以随时随地进行学习,真正打破了时间和空间的限制,对于工作繁忙,学习时间不固定的职场人而言网络远程教育是最方便不过的学习方式。

项目功能模块介绍

image-20220407195624722

项目技术点介绍

image-20220407200052911

前后端分离

开发接口就是开发Controller,service,mapper的过程

image-20220408221513260

二、项目开发

说明:

为了整体的阅读体验,不在粘贴代码

有需要的地方会粘贴关键代码,其余则图片形式展示

前端相关知识点

为了更好的阅读见博客:

快速入门Vue_小蜗牛耶的博客-CSDN博客

前端常见知识点汇总(ES6,Vue,axios,Node.js,npm,webpack)_小蜗牛耶的博客-CSDN博客

开发CRUD接口

SpringBoot+MybatisPlus+Swagger快速开发套路和总结_小蜗牛耶的博客-CSDN博客

改造登录到本地接口

我们用vue的模板,快速构建一个后台管理系统的模板

默认启动的时候使用的地址是

image-20220421221508516

这样的话会出现跨域问题!!!

跨域

简单说下跨域问题

跨域:指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制。

例如:a页面想获取b页面资源,如果a、b页面的协议、域名、端口、子域名不同,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源。注意:跨域限制访问,其实是浏览器的限制。理解这一点很重要!!!

同源策略:是指协议,域名,端口都要相同,其中有一个不同都会产生跨域;

img

如何解决跨域问题?

由之前的介绍我们已经知道错误的原因,既然跨域会产生问题,那么我们就不跨域不就完了嘛!!!

注解@CrossOrigin

在后端接口加上@CrossOrigin即可解决跨域问题

使用网关解决

后面在写

登录功能完善

**avatar **头像的意思

根据vue模板,对登录的需求我们需要写两个接口

login登录操作方法,和info登录之后获取用户信息的方法。

  1. login返回token值
  2. info返回roles name avatar

url里写的为后端的接口地址,最后访问的时候实际是dev.env.js中定义的BASE_API和这个里url拼接的地址

trim方法能够移除字符串右侧的空白字符或其他预定义字符。

1、定义登录API

主要是和后端写的接口路径一致,这样才能请求成功

image-20220422110733503

账号密码是直接写死的,login现在只是用来获取用户信息

image-20220422110139164

2、与后端接口整合

这里说的接口不是interface,而是开发功能的时候就叫开发接口

image-20220422110323122

3、测试

image-20220423150556447

image-20220422111445160

常见的跨域错误

没有写@CrossOrign注解

URL路径不对

访问请求错误(get,post)前后端是否一致

前端框架开发

架结构说明

图里没有截取完整,在 main.js中还有

render: h => h(App) 它的作用就是将App汇总组件放入容器中

new Vue({

 el: '#app',

 // 使用组件

 router,

 store,

 // 将App组件放入容器中

 render: h => h(App)

})

image-20220422144804071

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-05-25 11:33:58  更:2022-05-25 11:34:00 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 20:05:51-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码