社区项目前端vue总结

前序

在开发社区项目的前端时，根据当前的流行，选择了前后端分离，另外一方面也可以实现后端与前端的解耦。使修改前端代码的时候，无需再打包后台程序。

另外用用vue，提升一下技能。后端程序也得会前端啊。

一些总结

在开发中，总有一些方法在多个组件或者view中使用，每次都需要手动引入对应的方法，导致很繁琐，那么有没有方法不在每个需要的对应方法的组件导入呢？有需求-就会有解决方案。

我们的需求，就是将一些常用或公共的方法，在使用的地方无需重新导入，而是直接引入就可以，那么，这不就是我们java中的全局变量，或者静态类、spring的ioc容器吗？

那么，在vue中，我们应该如何解决这个问题呢？

根据百度，以及vue的官方文档找到了解决方案，可以将我们的通用方法，挂载到vue的prototype(原型)上，从而实现全局使用。

https://cn.vuejs.org/v2/cookbook/adding-instance-properties.html

挂载全局方法

代码示例：
main.js
import * as tools from "@/utils/common"
Vue.prototype.$tools = tools使用：
this.$tools.toastError("未登录")

父子组件传值

很多时候，我们都会将一个复杂的页面，抽出多个小的组件去编码实现，然后再组装到view。但是这样就会存在一些数据之间的交互问题。常见的场景就是子组件需要父组件的数据、父组件需要子组件的数据、兄弟组件需要兄弟的数据。

根据官方解决方案如下

通过 Prop 向子组件传递数据

1.父组件调用子组件的时候 绑定动态属性2、在子组件里面通过 props接收父组件传过来的数据props:['title']

监听子组件事件(子组件 $emit(父组件监听的函数名,数据)，@函数名=函数名)

1.调用子组件的时候定义一个ref2.在父组件里面通过this.$refs.header.属性this.$refs.header.方法

子组件主动获取父组件的数据和方法

this.$parent.数据this.$parent.方法

部署在非根目录下的问题

本次的社区项目，前台和后台是2个独立的vue项目。部署的时候想根目录下部署前台，然后nginx代理admin路径到后台项目，

在打包完成后，部署到nginx后，发现，后台项目的css，js能都404。猜测是目录的问题，然后查阅百度，找到了解决方案，可以指定publicPath参数和assetsDir参数。

publicPath：该配置能帮助你为项目中的所有资源指定一个基础路径。因此我们部署到正式环境的话，publicPath尽量定义成相对路径('./'),这样打包后就可以部署在任意目录了 。

assetsDir：定义打包后的静态资源目录

alias：定义别名。方法引入src下的内容，从而避免使用大量相对路径

官方文档https://cli.vuejs.org/zh/config/#publicpath

const path = require('path')function resolve(dir) {return path.join(__dirname, dir)
}module.exports = {// 选项...publicPath: process.env.NODE_ENV === "production" ? './' : '/',assetsDir: 'static',configureWebpack: {resolve: {alias: {'@': resolve('src')}}},}

Message弹多次的情况(如何只弹一次)

需求：部分提示信息，通过axios的response拦截器进行处理，进行友好的信息提示，但是在实际中，一个页面必定存在多个请求，那么，根据msg的提示信息，就会出现多个。但是这样友好型不够，我只想弹一次。本着有需求就有解决方案，我进行了百度。

解决方案：

定义一个类，这个类用于处理各种信息提示，如成功、错误、警告等。

弹框的时候判断当前页面是否已经存在了弹框的元素，如果已经存在，则不提示，否则可以进行提示。

并且在使用的地方，进行单例。

message.js
import { Message } from 'element-ui'
// 私有属性，只在当前文件可用
const showMessage = Symbol('showMessage')
export default class domMessage {success(options, single = true) {this[showMessage]('success', options, single)}warning(options, single = true) {this[showMessage]('warning', options, single)}info(options, single = true) {this[showMessage]('info', options, single)}error(options, single = true) {this[showMessage]('error', options, single)}[showMessage](type, options, single) {if (single) {// 关键代码，判断当前页是否有el-message标签，如果没有则执行弹窗操作if (document.getElementsByClassName('el-message').length === 0) {Message[type](options)}} else {Message[type](options)}}
}使用
方法外初始化，只初始化一次
var messageOnce = new MessageOne();在需要使用的方法内调用        
messageOnce.error({message: res.data.msg})

判断对象是否为空

Object.keys(postData).length == 0

Quill富文本编辑器自动获取焦点导致页面自动在最下面

因为要发帖，所以引入了富文本，用的时候挺好用，但是在正式测试的时候，发现点击帖子，就自动到了页面的最下面(因为编辑器在最下面)。咨询了一下前端的朋友，说把编辑器的代码注释掉看看正常不。注释后，发现正常。于是想到了焦点，然后，我就看看富文本有没有默认的配置可以不自动获取焦点，但是我失败了，没有默认的配置。于是只能通过代码来实现。

在Quill初始化后，禁用掉，然后调用失去焦点方法。这里必须禁用，不然还是会获得焦点this.Quill.enable(false);this.Quill.blur();//一大推初始化代码。//等到完全初始化后，在调用enable方法，接触掉禁用，就可以实现不自动获取焦点了，从而解决了问题this.Quill.enable(true);

路由守卫

来自vue目标，进行拦截，如果没有权限，直接跳转到登录页
import router from './router'import { Message } from 'element-ui'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import { getToken, removeToken } from '@/utils/auth' // get token from cookie
import getPageTitle from '@/utils/get-page-title'
import { getUserInfo } from "@/api/user"NProgress.configure({ showSpinner: false }) // NProgress Configurationconst whiteList = ['/login'] // no redirect whitelistrouter.beforeEach(async(to, from, next) => {// start progress barNProgress.start()// set page titledocument.title = getPageTitle(to.meta.title)// determine whether the user has logged inconst hasToken = getToken()if (hasToken) {if (to.path === '/login') {// if is logged in, redirect to the home pagenext({ path: '/' })NProgress.done()} else {//发送请求，判断用户是否已经登录await getUserInfo().then(res => {console.log(res);if (res.data != null) {next()} else {next(`/login?redirect=${to.path}`)removeToken();}})}} else {/* has no token*/if (whiteList.indexOf(to.path) !== -1) {// in the free login whitelist, go directlynext()} else {// other pages that do not have permission to access are redirected to the login page.next(`/login?redirect=${to.path}`)NProgress.done()}}
})router.afterEach(() => {// finish progress barNProgress.done()
})

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！