仿登录项目vue总结

最新推荐文章于 2024-06-17 13:21:32 发布

Haley6

最新推荐文章于 2024-06-17 13:21:32 发布

阅读量321

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/Haley6/article/details/116156142

版权

仿登录页面总结

使用vue-cli创建项目目录（看对目录在创建）

vue create 项目名  /vue ui可视化创建
不安装Formatter/.. 插件（默认有） 会限制语法
安装less  vuex vue-router
删除views目录下的home.vue about.vue文件
处理App.vue文件，main.js文件
创建vue.config.js放该项目默认路径或者其他
创建config文件放所需要的配置或json对象
在assets中适当建立路径（image）放所需要图片及文字
在views中建立要开发页面的相关目录和.vue文件
处理store/router文件
编写views文件

开发一个页面先搭建好html结构在渲染写js

安装所用依赖

vue-cli axios  element ui   iview

main.js解析

// 导入vue
import Vue from 'vue';
// 导入App.vue文件
import App from './App.vue';
// 导入router配置路径
import router from './router';
// 导入集中管理状态工具
import store from '/store';
// 导入axios请求工具
import axios from '/axios'
// 导入element-ui 和element-ui样式文件和  常用于主动操作后的反馈提示{Message}
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import {Message} from 'element-ui';
// 导入iview库 及其样式
import iView from 'iview';
import 'iview/dist/styles/iview.css';

// 使用导入的库
Vue.use(iView)
Vue.use(ElementUI)
// 用于入口文件 表示阻止生产模式，以开发模式运行
Vue.condig.productionTip=false;

// 把axios和Message挂载到Vue实例原型中，在项目中可以通过this.$xxx引用，vue的router和store就是默认挂载的
Vue.prototype.$axios=axios;
// 配置使用发送请求默认端口
axios.defaults.baseURL='127.0.0.1:8000'
//将来可以通过this.$Message设置是否报名成功或不成功
//具体使用见https://element.eleme.cn/#/zh-CN/component/message#fang-fa
Vue.prototype.$Message=Message

// 建立Vue实例挂载到app标签(根节点)上
new Vue({
    // 注册该插件 之后可以this.$router/store调用
    router,
    store,
    // render函数用于生成HTML DOM元素 h表示生成HTML
    /* 
    Vue.js 里面的 createElement 函数，这个函数的作用就是生成一个 VNode节点，
    render 函数得到这个 VNode 节点之后，返回给 Vue.js 的 mount 函数，渲染成真实 DOM 节点，
    并挂载到根节点上。
    简写见下方
    */
/*     render: function (createElement) {
        return createElement(App)
    } */
    
    render:h=>h(App)
}).$mount("#app");

注意

npm install axios
npm i element-ui -S
npm install iview --save
时候一定要在项目的目录文件下安装！！！！

卸载安装的
npm uninstall axios
npm uninstall element-ui
npm uninstall iview

vue.config.js

vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。
注意：该文件必须要放置在package.json下方才生效

https://cli.vuejs.org/zh/config/#vue-config-js

// 导出这个路径 默认项目运行在http://localhost:8080/signUpGroupWebsite/目录下
module.exports={
    publicPath:'/signUpGroupWebsite/'
    ...其他选项
}

package.json

{
  "name": "sugwi",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "axios": "^0.21.1",
    "core-js": "^3.6.5",
    "element-ui": "^2.15.1",
    "iview": "^3.5.4",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0",
    "vue-template-compiler": "^2.6.12",//应该安装开发时依赖
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "less": "^3.0.4",
    "less-loader": "^5.0.0",
    "vue-cli-plugin-element": "^1.0.1"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

注意事项

一般用element ui要安装管理它的插件  注意要安装开发依赖(devDependicies)
 "vue-cli-plugin-element": "^1.0.1",

  "vue-template-compiler": "^2.6.11"
// 表示该项目所适应匹配浏览器,
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]

也可以在src的config文件包下建立一些.json文件，用于存放前端用到的不是从后端请求得来的json对象的数据

使用vue-ui可视化

管理工具来创建项目

vue ui 拉取

App.vue

<template>
  <div id="app">
 <!-- 路由匹配到的组件将显示在这里 -->
    <router-view></router-view>
  </div>
 
</template>

<script>

export default {
  name: 'app',

}
</script>

<style lang="less">
// 对所有默认使用样式,清除浏览器默认设置
* {
  padding: 0;
  margin: 0;
}
// 对#app的默认使用样式
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>

//解释  <router-view></router-view> 到时候.vue东西都会根据router通过这个标签放到app.vue进而放到main.js最后放入index.html中
一层路径(/xxx)对应一个router-view。

比如url: /a/b/c (假设a、b、c都为正常路径，不会作为参数)
那/a对应的就是App.vue中的router-view，/a进入a.vue中
那/a/b对应的就是a.vue中的router-view， /a/b进入b.vue中

router的index.js

// 导入vue-router文件
import Vue from 'vue'
import VueRouter from 'vue-router'
// 导入vue文件
import login from '../views/manage/login'
import home from '../views/manage/home'
import stuInfo_home from '../views/manage/stuInfo_home'
import signup from '../views/user/signup'

// 使用VueRouter
Vue.use(VueRouter)

// 创建路径配置由数组管理
const routes = [
  {
    path: '/',
    // 重定向即页面一打开的位置是该路径对应的组件
    redirect: '/signup'
  },
  {
    path: '/login',
    // name必须是字符串 name属性可以放在App.vue的router-view中指定要渲染的对应组件
    // 例如 <router-view  name="Hello"></router-view> 将渲染Hello组件  一般用重定向设置开始页面,router-view就渲染重定向的页面
    name:'login',
    // 这里是把vue组件注册到router中由router支配跳转
    component:login
  },
  {
    path:'/home',
    name:'home',
    component:home,
    children:[
      {
        path:'/stuInfo',
        name:'stuInfo',
        component:stuInfo_home
      },
    ]
  },
  {
    path:'/signup',
    name:'signup',
    component:signup
  }
]

// 创建一个VueRouter对像用router接收以便于导出到main.js中
const router=new VueRouter({
  // 设置路径模式不是#
  mode:'history',
  base:process.env.BASE_URL,
  // 将路径配置数组由VueRouter对象管理
  routes,

})

//一般登录页面会设置全局前置守卫
// 设置全局前置守卫
router.beforeEach((to, from, next) => {
// 进入路径前会进行下列判断 当进入/home时为true
  if(!(to.path=="/"||to.path=='/signup'||to.path=="/login")){
    // 判断有没有获取到保存的login的token有则通过进入home
    if(sessionStorage.getItem('login')) return next();
    // 没有则返回原来的/login页面
    else return next('/login')
  }  
  // 当!(to.path=="/"||to.path=='/signup'||to.path=="/login")为false时直接无条件跳转,
  //即其中每一个路径都可以无条件跳转
next()

})

export default router;

name的用法：见https://www.jianshu.com/p/f86fea2cd109

.`vue`文件

`vue`文件

注意事项：

先搭建整体``html`文件架构
写script
导入所需要的（json，.vue（组件））文件
data是一个函数在.vue文件中
- data中的数据可以通过导入的文件(.``json`)的文件名.数据（原文件的数据）直接调用，由用户填的data信息数据一开始可以赋值为undefined或者[ ]，完善data数据
- HTML标签上与data关联：
  - 要提交给后台的数据需要用v-model与用户填的数据绑定
  - 将要呈现到页面的数据可以用：v-bind：属性名="属性值" 看具体``ui`框架属性

methods 是一个``vue`实例的方法属性

可以传参数
methods里的方法可以使用this.方法名互相调用
methods也可以使用data里的属性，通过this.属性名得到值
将methods与HTML标签绑定@click="submit"

methods提交表单用``aysnc`异步提交（异步得到响应体）

把要提交的对象放到一个大对象中let stdData={...}

// await方法可以返回一个promise对象，即后端的响应体 await方法只能用于async函数中
 // await会等待后边执行完再返回东西
 const {data:{code,message}}=await this.$axios.post('/post',stdData)

// console.log(data);//这里的data与axios返回的response相同 使用await可以把返回的基本对象写出来以便于接下来引用 例如：
 //可以直接用code
 if(code==='0000'){
       this.$Message({
                // $Message的主题
                 type:'success',
                 //要显示的信息
                 message:'提交成功',
                 //显示的时间
                  duration:"700"
                    })
 }else{
            // 错误就把提示信息设置为message
            this.$Message.error("所填信息有误");
                }

加入css样式

margin:0.8em auto  --auto用于设置居中
可以试着用vh vw和 em单位 1em=16px
Vw:相对于视框的宽度：视框宽度是100Vw
Vh:相对于视框的高度：视框高度是100Vh

/* 设置最外边的div占满整个视口,自适应不管在哪个端 */
  .最外边盒子名字{
       height: 100vh;
      width: 100vw;
  }

element ui的标签加样式时使用.el-breadcrumb

`vue`知识补充

```vs看源码快捷键：ctrl+点击
v-bind(:)data=“majorData”
解释：用于给该标签绑定属性属性名为data，属性值是data中的majordata数据(可以是对象，数组)


## `JS`知识补充

js中6个假的值:
false undefined 0 NaN null ‘’(空串)


### `JS`的存储实例

**返回值都是一个存储对象**

#### `sessionStorge`

* `localStorage` 和 `sessionStorage `属性允许在浏览器中存储 key/value 对的数据。

* `sessionStorage `在window上可以直接调用

* `sessionStorage` 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

  ```js
  //保存数据
  sessionStorage.setItem("key","value")
  
  //读取数据
  var value=sessionStorage.getItem("key");
  //删除指定键的数据语法
  var lastname=sessionStorage.removeItem("key")
  //删除所有数据
  sessionStorage.clear()
  //返回存储对象中第n个键的名称
  sessionStorage.key(2)
  
  //storage为对象  可以直接storage.a=1;存储
  var storage=window.sessionStorage;

`localStorage`

localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。

语法

//保存数据
localStorage.setItem("key","value")

//读取数据
var value=localStorage.getItem("key");
//删除指定键的数据语法
var lastname=localStorage.removeItem("key")
//删除所有数据
localStorage.clear()
//storage为对象  可以直接storage.a=1;存储
var storage=window.localStorage;

高阶数组语法

int num=[1,2,3];
//forEach可以遍历数组的每一项,必须传一个回调函数作为它的参数,item为数组每个元素,且item做回调函数第一个参数必须传
num.forEach((item)=>{...})

element-ui table 添加数据行后滚动条滚动到对应的行头或行尾问题

滚动到第一行：
this.$refs.table.bodyWrapper.scrollTop =0;

`Vue`补充

计算属性也可以写到{{}}里边,这个里边还可以做计算,3元运算符判断

进入/离开过渡

https://cn.vuejs.org/v2/guide/transitions.html

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。

1.最简单的使用transition定义过度
<transition name="login">
    内容
</transition>

<style>
    //表示在元素插入dom前和从dom中删除后的操作
	.login-enter,.login-leave-to{
  		transition: opacity .5s;
        /*也可设置时间和速度曲线,以及进入前的等待时间*/
        transition:all .8s  cubic-bezier(1.0,0.5,0.8,1.0)  2s
	}
 </style>
关于类选择器的名字:
	对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 <transition>，则 v- 是这些类名的默认前缀。如果你使用了 <transition name="my-transition">，那么 v-enter 会替换为 my-transition-enter。
  
 2.
        使用钩子函数,操作,只要在<transition @afterEnter="afterEnter">
    在vue的methods写方法 afterEnter(el,done){
        el为标签,
        done为一个函数,可传可不传
        }

过渡的类名

在进入/离开的过渡中，会有 6 个 class 切换。

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

`vue`动画

CSS动画用法同 CSS过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。

<div id="example-2">
  <button @click="show = !show">Toggle show</button>
  <transition name="bounce">
    <p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>
  </transition>
</div>
<script>
new Vue({
  el: '#example-2',
  data: {
    show: true
  }
})
</script>
<style>
   .bounce-enter-active {
  animation: bounce-in .5s;
}
.bounce-leave-active {
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
</style>

refs使用

<el-form class="login_form" :model="loginForm" :rules="checkData" ref="loginFormRef">
</el-form>

<script>
//获取el-form dom 节点
    this.$refs.loginFormRef
</script>

直接操作子组件非响应式
当 ref 和 v-for 一起使用的时候，你得到的 ref 将会是一个包含了对应数据源的这些子组件的数组。
被用来给元素或子组件注册引用信息。
引用信息将会注册在父组件的 $refs 对象上。

如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例
较容易在methods中获取``dom,方便操作dom`

`vue-router`使用

/*1.this.$router*/
//使用push跳转页面
this.$router.push("/xxx")
this.$router.push({path:"/xxx"})
//   /user/123  path不能和params一起使用,否则params无效
//类似于post传参
this.$router.push({name:'user',params:{userId:'123'}})
this.$router.push({path:`/user/${userId}`})
//新页面接收参数  this.$route.params.userId

// with query, resulting in /register?plan=private
this.$router.push({path:'register',query:{plan:'private'}})   // 类似于get请求传参  新页面接收 this.$route.query.plan


/*2.route的使用*/
一路由对象 (route object) 表示当前激活的路由的状态信息，包含了当前 URL 解析得到的信息，还有 URL 匹配到的路由记录 (route records)。
路由对象是不可变 (immutable) 的，每次成功的导航后都会产生一个新的对象
//路由对象出现在多个地方:
1.在组件内，即 this.$route使用
2.用$route在观察者(watch:{$route(to,from){}})回调内
3.router.match(location) 的返回值
4.导航守卫的参数：
router.beforeEach((to, from, next) => {
  // `to` 和 `from` 都是路由对象
})

//fullpath和path作用
fullPath 其作用是:fullPath能缓存路由跳转后面携带的参数,刷新后依旧存在,在PC端能起作用
而 path不能缓存路由跳转后面携带的参数,所以path 只能在只有两层数据结构的移动端起作用
//原因：
一般，移动端App 只能往里面走，表面和切换的页面是第一层， 点击功能按钮进去的是第二层。
这种层级的关系其实 是具有条转作用来着，所以你在第一层获取的数据，与第二层来回切换没问题。但是你第二层到第三层一来回切换，路由跳转携带的参数就丢失了。

子页面切换

点击这个链接跳转到其他组件的情况，通常会跳转到新的页面，蛋是，我们不想跳转到新页面，只在当前页面切换着显示，那么就要涉及到路由的嵌套了，也可以说是子路由的使用。
同个页面，切换显示不同组件的相应内容，同时地址栏的地址是会变的时候

例如:https://blog.csdn.net/luoyu6/article/details/80098145

总之:<router-view></router-view>用于将路由(该路由一般为原路由的子路由)匹配到的组件显示出来,没有它将不会显示组件

监听回车事件

用第三方组件或者UI框架会自带自身封装的事件，如keyup等，会覆盖原生的组件而无件而无法起效果

.native 修饰符就是用来注册元素的原生事件而不是组件自定义事件的

<el-input v-model="input" placeholder="请输入搜索关键字" class="input-width-select"
 @keyup.enter.native="getUserListByKeyword" ></el-input>

`async`和await举例

      /* 可以这里写请求数据的方法,在created中通过this.getUserList()调用使得页面挂载时执行该方法，实现在created时完成请求数据*/
        //在函数前面加上async 关键字，来表示它是异步的
        //因为async就是异步的意思， 异步函数也就意味着该函数的执行不会阻塞后面代码的执行
        //如果async 函数中有返回一个值 ,当调用该函数时，内部会调用Promise.resolve() 方法把它转化成一个promise 对象作为返回
        async getUserList(){
            const token={
                token:sessionStorage.getItem('login')
            }
            //await是等待的意思   它后面可以放任何表达式，不过我们更多的是放一个返回promise 对象的表达式。注意await 关键字只能放到async 函数里面
            //遇到了await, await 表示等一下，代码就暂停到这里，不再向下执行了。等后面的promise对象执行完毕，然后拿到promise resolve 的值并进行返回，返回值拿到之后，它继续向下执行
            /*当created调用getUserList时候,遇到async表示异步,不会阻塞它后面代码的执行,当一路顺风执行到这里时
            需要向后端发送请求,才能有数据给页面设置,需要页面等待暂停执行,正好看到了await关键字,遇到await后,函数暂停执行,等待axios请求完毕返回的Promise执行完毕返回resolve的数据,
            当数据返回赋值给{code,message,data:{total,students}}}时代码暂停结束,继续执行下边代码*/
            const {data:{code,message,data:{total,students}}}=await this.$axios.post(`/getStuAllInfo?page=${queryInfo.page}&pageSize=${queryInfo.pageSize}`,token);
            if(code!=='0000'){
                this.$Message.error(message)
            }
            //成功就获取数据,设置为data中的数据
            // 遍历获取的学生数组 执行回调函数 forEach
            students.forEach(item=>{
                // 把每个students的isDispensing转为String
                item.isDispensing=item.isDispensing.toString();
            })
            this.userList=students;
            this.queryInfo.total=total;
        },

post和get请求

HTTP协议中的两种发送请求的方法

区别

GET把参数包含在URL中，POST通过request body传递参数

Haley6

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
仿登录项目vue总结

仿登录页面总结使用vue-cli创建项目目录（看对目录在创建）vue create 项目名 /vue ui可视化创建不安装Formatter/.. 插件（默认有）会限制语法安装less vuex vue-router删除views目录下的home.vue about.vue文件处理App.vue文件，main.js文件创建vue.config.js放该项目默认路径或者其他创建config文件放所需要的配置或json对象在assets中适当建立路径（image）放所需要图片及文字在
复制链接

扫一扫