2020/03/16 02-前端路由和登录、注册组件实现

最新推荐文章于 2022-10-12 20:18:37 发布
最新推荐文章于 2022-10-12 20:18:37 发布
阅读量1.4k 收藏 2
点赞数
分类专栏： 60前后端分离博客项目(六)前端路由和Mobx
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42227818/article/details/104908559
版权

前端开发可以使用传统的jQuery方式，如果用现在的前端开发，往往用nodejs，然后做前后端开发，或者只做前端开发，纯做后端也行，nodejs现在已经通吃了

现在做前后端分离，后端用django来做，前后端分离不在乎用什么来做，只要给http接口即可，这样就是前后端独立开发各自的，项目就可以并行起来。
对于前端开发来讲，现在不是传统的方式，用react开发有它的好处。，用了前端的mvc，或者各种mvvc，mvvm各种变化，不管怎么变都是从mvc来的。

开发的方式发生了很大的变化，首先需要用脚手架来搭建出想要的东西
在这里插入图片描述
在这里插入图片描述
安装依赖包，一种是npm，一种是yarn（兼容了npm），可以这么安装yarn
在这里插入图片描述
项目的根目录有一个packge.json，将里面的依赖都安装一遍
在这里插入图片描述
现在就去下载包了

在这里插入图片描述

在这里插入图片描述
把这个一解压，就可以做前端项目了，frontend前端，静态一般都是nginx，httpd来管，动态都是tomcat，django，flask，做好动静分离
在这里插入图片描述
所有的代码写在src下
在这里插入图片描述
babel用的

在这里插入图片描述
git用的
在这里插入图片描述
npm register链接到淘宝
在这里插入图片描述
真正看到的网站首页
在这里插入图片描述
工具vscode配置
在这里插入图片描述
在这里插入图片描述
开发用
在这里插入图片描述
部署用
在这里插入图片描述
在src建立三个目录，以后就写react所有组件，react组件要继承componet或者无状态组件写一个function就好了

在这里插入图片描述
第二个service，这个跟可视化组件无关，是用来解决中间怎么服务的，这一次写的代码是分层架构

在这里插入图片描述
第三个是画样式表的
在这里插入图片描述
做模版

在这里插入图片描述
所有js入口

在这里插入图片描述
做一些信息上的变动

在这里插入图片描述
打开目录

在这里插入图片描述
index是最后进入的地方
在这里插入图片描述
先看看npm rc是否链接的是国内的

在这里插入图片描述
babel定义也是对的
在这里插入图片描述秃字符，^2.9.1就是，2.x最大的
在这里插入图片描述
这个工具，vscode用的

在这里插入图片描述
这是进入的首页
在这里插入图片描述
yarn.lock，下载了什么版本写的很清楚

在这里插入图片描述
一般进去之后，改改author之类的，name，description。
repository（git配置）。一般可以做git免密登录
在这里插入图片描述

在这里插入图片描述
开发的时候需要用到一个东西，devserver
在这里插入图片描述
devserver有很多项，这个就照这么配置即可，因为这个是牵扯到跨域的时候才用得到的
在这里插入图片描述
django现在是在后台暴露8000，这里是3000，所以以后只能让用户看到3000端口的，不能看到8000端口的
在这里插入图片描述
hmr热模块替换
在这里插入图片描述
要不要在控制台显示信息
在这里插入图片描述
显示那些信息，插入主干信息,false,不然太多信息了
在这里插入图片描述
这个压缩指的是gzip，server和浏览器之间数据可以进行压缩
在这里插入图片描述
安装依赖
在这里插入图片描述
把package.json的所有依赖都下载下来
在这里插入图片描述
在这里插入图片描述
yarn相当于npm install
在这里插入图片描述
在这里插入图片描述
要用到两个东西，跟路由相关的
在这里插入图片描述
这两个其实也可以放到package.json里，是为了提醒下

跟dom相关的

在这里插入图片描述
这两个工具有了之后就可以做前端路由

前端是需要访问后端提供的http服务，访问url，用get post请求，将数据返回前端，可以不返回真实内容，但是至少有一个状态码，让浏览器端自己通过状态码来决定如何处理

前端路由

在这里插入图片描述
在这里插入图片描述
这是官网

在这里插入图片描述
在这里插入图片描述
basic routing是先要学习的，先安装一下
在这里插入图片描述
这就是JSX一个组件
在这里插入图片描述
这个JSX相当于render函数返回一个h2
在这里插入图片描述
第一个修改的就是src的index，在这之前还可以先把目录创建出来

在这里插入图片描述
把这两个css放到src下的css目录里在这里插入图片描述
在这里插入图片描述
重新缺什么导什么
在这里插入图片描述
这样就可以使用了

在这里插入图片描述
现在项目其实可以运行的
在这里插入图片描述
现在其实已经ok了
在这里插入图片描述
看一下效果
在这里插入图片描述
在这里插入图片描述
这个项目采用前后端分离（一般用到模板技术就用不到这个了，模板里可以用jQuery放到前端什么样的目录里，可以使用前端技术）
前后端分离，前后端只靠数据来通信，所有数据放在后端（django，flask），前端放样式（react作为前端技术），
中间使用restfu份风格的api设计，来实现服务间的通信的。
用无session认证技术，JWT（一般服务器多了，用单点登录比较多的），强密码目前是最强的。
可视化组件都是蚂蚁金服开源的antd组件。
最后部署时采用动静分离的部署方案，nginx+uwsgi+django，动静分离的部署
在这里插入图片描述
这俩个可以写

在这里插入图片描述
首页关于页都是可以写的

在这里插入图片描述
页可以点击案例，basic
在这里插入图片描述
这就是前端路由，没到服务器去，这里面没有和服务器进行交互，以前点链接按照道理要跟服务器交互，服务器给你新网页的，这里点了半天，服务器没有收到请求，所有请求都是在js端前端完成的，跟服务器没有发生任何交互，表面看是做切换，但是只是在浏览器完成的，只是相当于把要的内容动态生成了。
但是要是这个填充内容确实需要来自服务器端，我们才发送ajax请求到服务器去要数据，才拿回来数据，否则做的所有事情都是在客户端点来点去

在这里插入图片描述
但是毕竟路径变了，这个路径需要配置，点了之后需要调用什么组件，做什么呈现，这又是通过一个地址对函数进行映射，所以又叫路由，叫前端路由。
这个跟后端路由不一样，后端路由是要通过http请求，将url发过去，将url和你的view函数之间建立映射关系。
在这里插入图片描述
这一块是它的路径被你的js拦截了，这个js现在找到一个现在所谓的视图函数，这个视图函数全在前端的js当中，根本没跟后台进行交互，除非有必要，根本没给服务器端发过请求
在这里插入图片描述
这两个其实是可以抄一下的
在这里插入图片描述
这个跟上面两个是无状态组件的两种写法

在这里插入图片描述
组件一定要大写
在这里插入图片描述
就变成这样了
在这里插入图片描述
我们现在想要地址的变化，然后能够访问到相当于不同的页面，这种叫单页面应用，页面时不刷新的，刷页面中的组件，dm树只替换一部分即可
在这里插入图片描述
所有右键查看源代码永远都是这么些内容,所以js加入到前端开发，整个开发方式都跟以前不一样了
在这里插入图片描述
需要前端路由组件来解决问题
在这里插入图片描述
这个路由时不可见组件

在这里插入图片描述
路由，里面些了路径=/，exact 相当于严格，路径必须等于/，这就是路径和组件的映射
在这里插入图片描述
root没有定义
在这里插入图片描述
还要抄这一句话
在这里插入图片描述
这就是路由route，link链接

在这里插入图片描述
路由外面应该套一个东西

在这里插入图片描述
route要使用要在外面套一个router在这里插入图片描述
router看起来时一个顶级元素
在这里插入图片描述
router只能有一个child

在这里插入图片描述
挪到div里，现在就等于是一个child了

在这里插入图片描述
现在就有了
在这里插入图片描述
about可以访问
在这里插入图片描述

在这里插入图片描述

要使用路由就需要，引入一个组件，操作dom，
在这里插入图片描述
使用一个router组件是来定义路由的
在这里插入图片描述
route只是一个定义，只是将路径和调用的组件定义一个映射关系，组件的变化是通过url的变化而变化。页面一直没动。我们只是在替换组件，替换dom树中该显示什么。
否则传统的页面就是点一下请求到后端，页面刷新。所以我们用react-router来完成前端组件替换
在这里插入图片描述

在这里插入图片描述
router中必须只有一个元素，所以我们在中间加了div，div元素内部有什么就管不到了
在这里插入图片描述在这里插入图片描述
地址一旦变化，组件就被替换掉了
在这里插入图片描述
其实是做了组件替换，并没有访问后端，所以对服务器的负担是非常小的

在这里插入图片描述
有一个非常著名的网站codepen，这个网站有大量的js代码可以用

在这里插入图片描述
这段html复制下

在这里插入图片描述
在项目里建一个测试用的t.html，现在其实没有样式，通过class调用外部样式
在这里插入图片描述
外部样式放在了css
在这里插入图片描述
已经放到login.css当中
在这里插入图片描述
我们要把这样的东西，装到组件里，到时候通过前端路由，然后把组件塞进去

在这里插入图片描述
创建组件，右键component，准备创建
在这里插入图片描述
这是来自react的，在这里只是创建组件，div顶层也有了
在这里插入图片描述
需要导出一下组件，缺省导出
在这里插入图片描述

要写一些东西，现在组件有了,用这样的方法就把login加进来了
在这里插入图片描述
login就有了

在这里插入图片描述
改一下文字

在这里插入图片描述
现在看看能不能加个样式，现在这样提示解析失败了
在这里插入图片描述
这里没加
在这里插入图片描述
加上css
在这里插入图片描述
需要重新启动
在这里插入图片描述
现在这样至少有点效果
在这里插入图片描述
还是用这里的模版

在这里插入图片描述
做一些调整，所有的class都要换成className
在这里插入图片描述

在这里插入图片描述
这样界面就出来了
在这里插入图片描述
改成中文试试
在这里插入图片描述
点击闪一下是因为有form表单

在这里插入图片描述
有form标签，默认行为就是要提交post请求的，提交整个页面同步刷新，等服务器response，

在这里插入图片描述
提交整个页面同步刷新，等服务器response，就会刷成这样

在这里插入图片描述
在这里插入图片描述
有些人p标签习惯不闭合，但是这里是JSX语法，要求必须闭合
在这里插入图片描述
在这里插入图片描述
a标签都要改成 link to
在这里插入图片描述
可以是一个login，一个reg，免得出错在这里插入图片描述
先把只要是用的链接都改了，现在一加就可以用了
在这里插入图片描述
改了就归路由管了
在这里插入图片描述
注册页顺便也改下，写一个reg。js
在这里插入图片描述

在这里插入图片描述
link 没有defined
在这里插入图片描述
在这里插入图片描述
大括号是不能去掉的

在这里插入图片描述
改一下classname

在这里插入图片描述
注册是跳了，但是前段路由没有管理起来，在index里没加
在这里插入图片描述
index里加一下

在这里插入图片描述
在这里插入图片描述
改一下中文
在这里插入图片描述
这个东西用户体验感觉特别好，没有和后台交换几乎是瞬间完成的，但是有时候就是模版单挑，登录到首页模版就没变过。这就是怎么把其他网页一些好的元素搬到页面里来。做一些调整，常熟市文件拿来，最后导入就可以了
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
导入出错是因为加载不了样式表
在这里插入图片描述
加在这里

在这里插入图片描述
两种写法都有可以

在这里插入图片描述
最后看到了登录页面

在这里插入图片描述
在这里插入图片描述
用前面的方法还是变成组件，随意

在这里插入图片描述
但是现在没有导航栏

在这里插入图片描述
在这里插入图片描述
导航栏其实就是有的
在这里插入图片描述
这两部分是一一对应的在这里插入图片描述
路径变化会找组件，然后组件会来渲染
在这里插入图片描述
一保存页面就能看到了

在这里插入图片描述
丑一点没事，antdesginer，再修改漂亮的
在这里插入图片描述
只要router函数是顶级元素就行，里面基层div随你
在这里插入图片描述
在这里插入图片描述
这些都基本达到了项目的构建：
首先搭建脚手架，基本不改，除非升级个别组件的版本，这一次多了三个目录，分别做不同的事情，比如
componet都放可视化组件，view，
service中间层些业务的地方，C还管一些调度的功能，从后端拿到数据，
css管样式

在这里插入图片描述
改一下配置，需要加代理
在这里插入图片描述
安装路由组件
在这里插入图片描述
组件加进来使用方式
在这里插入图片描述
官网是让我们在router内部使用route组件，route组件能帮我们实现前端路由，前端路由实现的是，前端url到组件的映射，页面变了直接换组件，页面不变
在这里插入图片描述传统页面如何变成主键跟现在的东西结合在一起，可以写JSX语法，把传统页面剥离出来即可，唯一要解决的是样式问题，
还好codepen提供了大量的东西，需要你去选择在这里插入图片描述在这里插入图片描述
注意要把class全部换成className在这里插入图片描述
关注的链接要和路由挂钩，就要换成Link，否则路由就不管你了
在这里插入图片描述
有些非闭合标签要闭合，比如hr，br，否则会报错出来在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
加到首页里加一个router
在这里插入图片描述
在这里插入图片描述
样式表加载错误，需要改一个配置文件
在这里插入图片描述
就可以看到登录页面了
在这里插入图片描述
注册组件也是一样的办法
在这里插入图片描述
加一条静态/前端路由即可
在这里插入图片描述
就实现了注册页面
在这里插入图片描述
把导航栏加上去就可以实现快速切换
在这里插入图片描述
在这里插入图片描述

48N6E
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
山东大学项目实训（三）——登录注册及页面切换功能实现（本地）（7.1、7.2）
Devillllived的博客
07-07 197
前面我已经完成了登录注册的页面设计以及router的搭建，那么接下来就要实现功能了，不过先从本地的入手，后面再跟后端服务器的接口连上。 首先是登录，登录只有两个参数：phone和pwd，所以首先设定参数并传给功能函数，主要代码如下： const param = reactive({ phone: "", pwd: "", }); const rules = { phone: [ {
前端路由v-router入门使用：实现登录注册组件切换
weixin_42637336的博客
12-10 1702
什么是前端路由？ 对于单页面程序来说，主要通过url的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点，http请求不会包含hash相关的内容，所以，单页面中的跳转主要用hash实现。在单页面程序中，这种通过hash改变来切换页面的方式，称为前端路由。 什么是后端路由？ 对于普通网站，所有的超链接都是url地址，所有的url地址都对于服务器上对应的资源。 ...
Vue的组件切换之注册登录切换
保持饥渴、好奇
08-12 2974
代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=...
浅谈vue-router使用和场景,手把手实现登录和注册页切换
上上迁的专栏
11-30 2057
文章目录前言目标关键字一、定义二、使用及场景总结参考 前言 目标 vue-router的基本使用。 关键字 ，，，，， 一、定义 通过组件实现动态渲染。 二、使用及场景 1 实现一个含登录和注册，点击不同按钮切换登录和注册页 2 引入依赖 使用npm安装： npm install vue-router --save <script src="../node_modules/vue-router/dist/vue-router.js"></script> 3 编码登录和注册
基于vue-router实现 登录注册 组件切换功能
m0_48419191的博客
06-09 3236
今天用vue.js基于components和vue-router做了个简单的 登录注册 组件切换功能，之前都是通过<a>标签链接两个地址来实现跳转，这样增加了页面跳转所需时间，而且用户在使用时也不够流畅。实现效果如下，点击右下角的登录注册链接切换，（只是图中没有显示出我的鼠标指针） 以下是代码 首先导入vue-router文件，这一步千万不要忘记了 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">...
vue 实现用户登录方式的切换功能
12-28
一、vue 实现用户登录方式的切换 在 data 当中，定义一个标识符 loginWay，用来表示是用短信登录还是密码登录，true代表短信登录，false 代表密码登录，代码如下所示： data() { return { loginWay: true } } 在短信登录和密码登录上，进行动态样式绑定，loginWay为true就短信登录绑定动态样式on，loginWay为false就密码登录绑定动态样式on，并且也绑定点击事件，进行设置 loginWay的true和false，代码如下所示： <h2 class=login_logo>用户登录</h2> <div class
路由的注册方法
南枝向暖北枝寒
08-24 1012
路由的注册方法 我们经常需要频繁的修改代码，每次修改代码都需要重启web服务器，这是很麻烦的。 只要开启flask的调试模式，自动重启功能就有了。开启调试模式的方法就是在 run 函数传入参数 debug=True 。 之前的路由注册是通过装饰器实现的： @app.route('/hello/') def hello(): return 'Hello, lulu' 也可以通过 add_url_rule 来完成路由注册，@app.route('/hello/') 的本质就是调用 add_url_ru
详解前端路由实现与react-router使用姿势
12-07
对于有过SPA开发经验的人来说，路由这个名词并不陌生，前端的路由和后端的路由在实现技术上不一样，但是原理都是一样的。在 HTML5 的 history API 出现之前，前端的路由都是通过 hash 来实现的，hash 能兼容低版本的...
vue-router路由与页面间导航实例解析
11-30
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由...前端路由是找到地址匹配的一个组件或者对象将其渲染出来。改变浏览器地址不向服务器
在vue-cli脚手架中配置一个vue-router前端路由
12-09
这篇文章给大家讲解的是在vue-cli脚手架中如何配置vue-router前端路由的相关内容，分享出来供打击参考学习，下面来一起看看详细的介绍： 首先你需要一个main.js文件 //然后引入vue-router import VueRouter from '...
nodejs中实现用户注册路由功能
01-02
经过前面几次的学习，已经可以做下小功能，今天要实现的是用户注册路由。 一、users_model.js  功能:定义用户对象模型 var mongoose=require('mongoose'), Schema=mongoose.Schema; var UserSchema=new Schema({ username:{type:String,unique:true}, email:String, color:String, hashed_password:String }); mongoose.model('User',UserSchema); 二、users
前端纯基础实现登录页面
04-05
前端登录页，纯js+html+css实现 实现功能：账号密码登录，可进行tab切换功能
轻量级前端路由
08-10
支持hash，history两种模式，自动检测兼容。url参数变化，不触发url变更。适合页面片段ajax请求，后页面片段内又有ajax请求。
Vue.js路由组件vue-router使用方法详解
12-29
只需要配置组件和路由映射，然后告诉 vue-router 在哪里渲染即可。 一、普通方式基本例子： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>vue-router使用...
基于Vue/Vue-Router/axios 实现的前端用户权限控制解决方案
最新发布
11-20
Vue-Access-Control是一套基于Vue/Vue-Router/axios 实现的前端用户权限控制解决方案，通过对路由、视图、请求三个层面的控制，使开发者可以实现任意颗粒度的用户权限控制
Vue入门（五）—— 前端路由
冰之沁泠的博客
02-20 412
路由的概念 路由的本质就是一种对应关系，比如说我们在url地址中输入我们要访问的url地址之后，浏览器要去请求这个url地址对应的资源。 那么url地址和真实的资源之间就有一种对应的关系，就是路由。 路由分为前端路由和后端路由 后端路由是由服务器端进行实现，并完成资源的分发 前端路由是依靠hash值(锚链接)的变化进行实现 后端路由性能相对前端路由来说较低，所以，接下来主要讲解的是前端路由。 前端路由的基本概念 根据不同的事件来显示不同的页面内容，即事件与事件处理函数之间的对应关系 前端路由主要做的事
Vue.js-Vue-router的基本使用
JunsIr的技术栈
04-28 964
Vue.js最终序曲-Vue-router（Vue路由） 第一序： Vue入门 第二序： Vue指令 第三序： Vue组件 模拟 现在我们来实现这样一个功能： 一个页面，包含登录和注册，点击不同按钮，实现登录和注册页切换 编写父组件 为了让接下来的功能比较清晰，我们先新建一个文件夹：src 然后新建一个HTML文件，作为入口：index.html 编写页面的基本结构： <!DOCTYP...
批量自动注册组件
hmxs_hmbb的博客
10-12 376
批量自动注册组件
前端路由工作原理与使用
CRMEB小程序商城的博客
05-19 4499
单页应用和多页应用 单页面应用：所有功能在一个页面上实现 一个.html 文件 前端路由 组件化开发 网易云音乐 小米移动端 多页应用：与单页应用相对应的，不同的功能通过不同的页面来实现 单页面 - 多页面对比 路由 vue 路由官网 路由理解的概念 路由：就是一一对应关系的集合。 前端路由（单页应用程序）： 一个 url 地址，对应哪个组件 后端路由：一个接口地址，对应哪一段接口地址 前端路由 后端路由 前端路由工作原理 前端路由的本质，对 url 的 hash 值进行改变和监听，切换对应页面组件的
添加一个路由守卫import Vue from 'vue'; import Router from 'vue-router'; import serve from '@/views/serve/serv-e.vue';//服务 import hospital from '@/views/hospital/hosp-ital.vue';//导诊 import current from '@/views/current/curr-ent.vue';//一码通行 import information from '@/views/information/info-rmation.vue';//消息 import mine from '@/views/mine/mi-ne.vue';//我的 import login from '@/views/login/logi-n.vue';//登录 Vue.use(Router); const router = new Router({ routes: [ { path: '/', name: 'login', component: login, meta: { requiresAuth: true }, // 需要登录才能访问的路由 }, { path: '/serve', name: 'serve', component: serve, meta: { requiresAuth: true }, // 需要登录才能访问的路由 }, { path: '/hospital', name: 'hospital', component: hospital, meta: { requiresAuth: true }, // 需要登录才能访问的路由 }, { path: '/current', name: 'current', component: current, meta: { requiresAuth: true }, // 需要登录才能访问的路由 }, { path: '/information', name: 'information', component: information, meta: { requiresAuth: true }, // 需要登录才能访问的路由 }, { path: '/mine', name: 'mine', component: mine, meta: { requiresAuth: true }, // 需要登录才能访问的路由 }, ], }); // 路由前置守卫 export default router;
06-02
这段代码是一个 Vue.js 的路由配置，包含了六个路由配置项。其中每一个路由的 path 属性指定了该路由对应的 URL 路径，name 属性指定路由的名称，component 属性指定了该路由对应的组件。meta 属性指定了该路由的元数据，这里的 requiresAuth 为 true 意味着该路由需要登录才能访问。 此外，该代码还导出了一个名为 router 的对象，并在对象上定义了一个路由前置守卫。路由前置守卫是一个函数，它会在每个路由切换之前调用，可以用来做一些权限验证等操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值