Vue快速完成前后端开发的相关问题

2022/8/25 23:23:10

本文主要是介绍Vue快速完成前后端开发的相关问题,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

创建vue项目

1.使用GUI界面创建Vue工程

在DOS窗口下在指定目录下执行vue ui,然后在 http://localhost:8000页面下进行相关的配置即可。

2.在DOS窗口下

使用vue create 项目名称命令创建项目

前端访问后端接口

前端通过Ajax请求访问后端的Restful接口。因此需要安装axios插件。(axios封装了Ajax请求相关操作)

vue add axios

Element UI

在图形界面下搜索ElementUI插件进行安装

$router和$route的应用

1.$router
  1. 获取router文件夹下index.js中定义的routes通过$router.options.routes就可以获取自定义的routes对象
  2. 可以进行编程式导航的路由跳转
例如
this.$router.push()
this.$router.replace()
2.$route
  1. 在vue组件中获取跳转到当前组件的path
this.$route.fullPath
或者如下
this.$route.path
  1. 获取路由的信息以及路由跳转传递的参数
// 例如在meta中定义一个表示true、false的字段
// 控制是否显示当前路由对应的组件
this.$route.meta 

this.$route.params
this.$route.query

vue中实现路由跳转的方式

  1. 使用replace方法
    1. 不带参数
    this.$router.replace({path: '/xxx'})
    
    1. query传参:相当于浏览器中发送get形式的请求,参数拼接在URL后面
    // 传参
    this.$router.replace({path:'/xxx',query:{id:'111'}})
    // 获取参数的值
    this.$route.query.id
    
    1. params传参:属于路径当中的一部分
    // 传参
    // 配置路由的时候需要使用占位符声明接收params参数
    path:'/serach/:keyword'
    // params参数可以传递,也可以不传递
    path:'/serach/:keyword?'
    
    
  2. 使用router-link标签,它相当于a标签
    1. to属性:指定跳转的目标地址。
    //to属性的值有两种写法
    写法1:字符串写法
    <router-link :to="`/student?id=${id}&mess=${message}`">学生信息</router-link>
    写法2:对象写法,其中name属性的值即为命名路由中的name配置项的值
    <router-link :to="{
        name: 'School',
        params:{
          address:'杭州',
          id: 23
        },
        query: {
          mess: 'test'
        }
      }">学校信息</router-link>
    
    1. replace属性:控制路由跳转时操作浏览器历史记录的模式,replace表示替换当前记录。
  3. 使用push()方法
    1. query传参
    // 传参
    this.$router.push('/xxx?id='+row.id)
    // 获取参数的值
    this.$route.query.id
    
    1. params传参
     this.$router.push('/search/' + this.keyword)
    // 对象写法,name属性属性的值需要在路由配置中配置好
    this.$router.push({
    
        name:'search',
        params:{keyword:this.keyword}
    })
    
  4. 使用go()方法

将数据存储于客户端浏览器的方式

  1. 使用window对象的localStorage属性:在浏览器中存储键值对的数据。JSON.stringify()方法可以将js对象转为json字符串,JSON.parse()方法则相反。
// 存储
localStorage.setItem(string key,string value)
// 读取
localStorage.getItem(string key);
// 移除
localStorage.removeItem(string key)
  1. 使用vue-ls插件,参考vue-ls

@click.native中的native属性

给一个Vue组件绑定DOM原生事件时,需要加上native才能监听原生事件。例如:

<el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>

刷新浏览器中的当前窗口

调用如下方法将会重新载入当前文档

window.location.reload();

路由

路由的分类
  1. constantRoutes:不需要动态判断权限的路由
  2. asyncRoutes:需要动态判断权限的路由
路由的常用配置项

参考

  1. hidden:该属性表示是否隐藏路由。值为true表示不在sidebar显示该路由的meta属性的title值。
  2. redirect:不存在与当前路由匹配的视图(组件),配置redirect属性重定向到其他路由地址。

vue中this.$refs的应用

  1. ref编写在原生的HTML标签上:this.$refs.xxx,获取的是标签对应的DOM元素
  2. ref编写在vue中的组件时:this.$refs.xxx获取的是子组件的引用
<!--在index.vue中有如下定义:-->
<el-form ref="loginForm">
    <el-button :loading="loading" 
    type="primary"
    style="width:100%;margin-bottom:30px;"
    @click.native.prevent="handleLogin">登录
    </el-button>
</el-form>

//handleLogin方法定义如下:
handleLogin() {
  this.$refs.loginForm.validate(valid => {
    if (valid) {
      this.loading = true
      this.$store.dispatch('user/login', this.loginForm).then(() => {
        this.$router.push({ path: this.redirect || '/' })
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    } else {
      console.log('error submit!!')
      return false
    }
  })
}

寻找icon的网站

https://w
ww.iconfont.cn/

keep-alive组件

包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。

  1. include属性:缓存指定名称的组件
<keep-alive :include="cachedViews">
    <!-- key属性保证不同的页面key不同-->
    <router-view :key="key" />
</keep-alive>

如何去除浏览器中URL中的#

参考

vscode中调试vue项目中的代码

参考

在Vue组件中获取vuex的状态

  1. 通过this.$store.state.xxx来获取

如何清除动态路由信息

this.$router.matcher含有动态路由的相关信息

export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher
}

node和npm版本过高导致npm install安装依赖失败

解决方案:降低node版本即可,新版本的node中自带npm

  1. node.js的环境配置
    1. 在安装好的node.js根目录下新建node_globalnode_cache文件夹,node_global文件夹下新建node_modules文件夹
    2. 在cmd窗口下输入
    npm config set prefix "node_global文件夹所在的路径"
    npm config set cache "node_cache文件夹所在的路径"
    
    1. 配置环境变量:新建变量名NODE_PATH,其值为步骤1新建的node_modules文件夹所在的路径;在path变量下新增值为步骤1新建的node_global文件夹所在的路径和新增安装好的node.js所在的根目录。
      自定义node_global的目录是有必要的,因为使用npm install -g 包名进行全局安装的时候默认安装在c盘。可以使用npm root -g命令查看全局安装的位置

除了vue element admin快速搭建系统后台的框架,好用的框架

Ant Design Vue,提供了大量的ui组件。案例:https://pro.antdv.com/

vue中给img图片添加动态路径,路径正确图片不显示

  1. 问题演示
 <!-- v-for循环生成div -->
<div class="wrapper" v-for="(event, index) of eventsObj" >
    <div class="img-wrapper">
        <img :src="event['img_urls'][0]" class="imgs" />
    </div>
</div>
  1. 解决办法是:
eventsObj: [
        {
            // 事件截图
            img_urls: [
                require("@/views/warning-event/test/test.png"),
                require("@/views/warning-event/test/city.jpg"),
            ], 
        }
    ]

多语言插件

vue-i18n这个插件提供了多语言解决方案。

Vue单文件组件中使用<style lang="scss"></style>

  1. 安装sass-loader
npm install sass-loader@版本号 --save-dev

Element UI 时间组件、下拉框的弹出框的样式的修改

参考



这篇关于Vue快速完成前后端开发的相关问题的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程