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

Vue环境搭建

全局安装vue及相关

npm install vue -g
npm install -g @vue/cli
npm install -g @vue/cli-init
npm install vue-router -g

全局安装webpack及相关

npm install webpack@5.75.0 -g
npm install --g webpack-cli@4.10.0

创建vue项目

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

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

2.在CMD窗口下

在CMD窗口下输入vue create 项目名称进行Vue项目的创建

# 在personal目录下创建Vue项目
E:\personal>vue create website
# 选择手动配置
Vue CLI v5.0.8
? Please pick a preset:
  Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
> Manually select features
# 选择需要的特性
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and
<enter> to proceed)
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 (*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing
# 选择Vue的版本
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 3.x
  2.x
# 前端路由是否使用history模式
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y
# 选择CSS预处理器
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
  Sass/SCSS (with dart-sass)
> Less
  Stylus
# 选择格式验证工具
? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
> ESLint + Prettier
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to
proceed)
>(*) Lint on save
 ( ) Lint and fix on commit
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
In package.json
? Save this as a preset for future projects? (y/N) N
? Pick the package manager to use when installing dependencies: (Use arrow keys)
> Use Yarn
  Use NPM

前端访问后端接口

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

vue add axios

Element UI

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

$router和$route的应用

1.$router

获取router文件夹下index.js中定义的routes通过$router.options.routes就可以获取自定义的routes对象
可以进行编程式导航的路由跳转

例如
this.$router.push()
this.$router.replace()

2.$route

在vue组件中获取跳转到当前组件的path

this.$route.fullPath
或者如下
this.$route.path

获取路由的信息以及路由跳转传递的参数

// 例如在meta中定义一个表示true、false的字段
// 控制是否显示当前路由对应的组件
this.$route.meta 

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

vue中实现路由跳转的方式

使用replace方法

不带参数

this.$router.replace({path: '/xxx'})

query传参：相当于浏览器中发送get形式的请求，参数拼接在URL后面

// 传参
this.$router.replace({path:'/xxx',query:{id:'111'}})
// 获取参数的值
this.$route.query.id

params传参：属于路径当中的一部分

// 传参
// 配置路由的时候需要使用占位符声明接收params参数
path:'/serach/:keyword'
// params参数可以传递，也可以不传递
path:'/serach/:keyword?'

使用router-link标签，它相当于a标签

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>

replace属性：控制路由跳转时操作浏览器历史记录的模式，replace表示替换当前记录。

使用push()方法

query传参

// 传参
this.$router.push('/xxx?id='+row.id)
// 获取参数的值
this.$route.query.id

params传参

 this.$router.push('/search/' + this.keyword)
// 对象写法,name属性属性的值需要在路由配置中配置好
this.$router.push({

    name:'search',
    params:{keyword:this.keyword}
})

使用go()方法

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

使用window对象的localStorage属性：在浏览器中存储键值对的数据。JSON.stringify()方法可以将js对象转为json字符串,JSON.parse()方法则相反。

// 存储
localStorage.setItem(string key,string value)
// 读取
localStorage.getItem(string key);
// 移除
localStorage.removeItem(string key)

使用vue-ls插件，参考vue-ls

@click.native中的native属性

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

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

刷新浏览器中的当前窗口

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

window.location.reload();

路由

路由的分类

constantRoutes：不需要动态判断权限的路由
asyncRoutes:需要动态判断权限的路由

路由的常用配置项

参考

hidden：该属性表示是否隐藏路由。值为true表示不在sidebar显示该路由的meta属性的title值。
redirect：不存在与当前路由匹配的视图（组件），配置redirect属性重定向到其他路由地址。

vue中this.$refs的应用

ref编写在原生的HTML标签上：this.$refs.xxx,获取的是标签对应的DOM元素
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://www.iconfont.cn/

keep-alive组件

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

include属性：缓存指定名称的组件

<keep-alive :include="cachedViews">
    <!-- key属性保证不同的页面key不同-->
    <router-view :key="key" />
</keep-alive>

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

参考

vscode中调试vue项目中的代码

参考

在Vue组件中获取vuex的状态

通过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. 可以使用nvm工具控制node的版本
2. 下载其他版本，然后进行环境变量的配置

npm/yarn修改安装全局包时的安装路径以及缓存路径

1.npm

安装完node，一般会自带一个包管理工具npm，位于node.js安装目录下的node_modules/npm目录下

在安装好的node.js根目录下新建node_global和node_cache文件夹，node_global文件夹下新建node_modules文件夹
在windows powershell窗口下以管理员身份打开安装的node目录下node_modules/npm目录下的npmrc文件，将该文件中的对应配置项修改为如下

prefix=E:\developTools\tools\Node\node_global
cache=E:\developTools\tools\Node\node_cache

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

2.yarn

使用npm包管理工具全局安装yarn，安装成功后yarn包位于上述新建的node_global目录下

npm install -g yarn

查看yarn的默认配置信息

yarn global bin --->C:\Users\root\AppData\Local\Yarn\bin
yarn global dir --->C:\Users\root\AppData\Local\Yarn\Data\global
yarn cache dir  -->C:\Users\root\AppData\Local\Yarn\Cache\v6

配置

yarn config set prefix "E:\developTools\tools\Node\node_global\node_modules\yarn\data"
yarn config  set global-folder "E:\developTools\tools\Node\node_global\node_modules\yarn\data\global"
yarn config set cache-folder "E:\developTools\tools\Node\node_global\node_modules\yarn\cache"
yarn config set link-folder "E:\developTools\tools\Node\node_global\node_modules\yarn\data\link"

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

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

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

问题演示

 <!-- 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>

解决办法是：

eventsObj: [
        {
            // 事件截图
            img_urls: [
                require("@/views/warning-event/test/test.png"),
                require("@/views/warning-event/test/city.jpg"),
            ], 
        }
    ]

多语言插件

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

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

安装sass-loader

npm install sass-loader@版本号 --save-dev
// 例如
npm install sass-loader@7.3.1

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

参考

qs

因为项目引入了axios依赖，axios中包含qs包，所以可以直接在项目中import qs from 'qs'引入qs
qs中的常用方法：
qs.stringify()可以将对象序列化成URL的形式，以&进行拼接

使用Vue开发前端时，页面已经渲染，数据还未更新的问题

对需要显示的组件使用v-show控制其隐藏或者使用v-if控制其不显示

<div class="grid-content-right bg-purple">
        <main-win :concreteEvent="passdEvent" v-if="isShow" />
</div>

在异步请求获取到数据后，再控制页面显示，例如：

// 初始化页面上的数据
getAllWarningVideo() {
    events.getAllWarningVideo()
    .then((response) => {
        //...
        this.isShow = true;
    }
        
    })
    .catch();
},

vue中动态绑定样式

使用三元运算符，例如：

# minIndex是data中定义的属性
# arrow-white、arrow-grey是自定义的样式类名
<a :class="minIndex > 0 ? 'arrow-white' : 'arrow-grey'" @click="showPriorImg"><</a>

函数写法，根据属性不同的值绑定不同的样式。例如：

<span :class="concreteType(item.type)">{{item.type}}</span>

函数如下：
concreteType(type) {
    if (type === "正常" || type === "充足") return "text_green";
      else if (type === "拥堵") return "text_brown";
      else if (type == "爆满") return "text_red";
  }

实时流

1.在Web页面中播放实时数据流

1.rtsp格式

rtsp：全称为Real Time Streaming Protocol，实时流协议。
rtsp视频流的地址格式为：rtsp://用户名:密码@主机名:端口号/路径

2.flv格式

使用video标签，例如：

<div class="video-realtime-div">
    <video
        style="width:100%;height:100%;object-fit:fill !important;"
        id="videoElement"
        autoplay
    ></video>
</div>

遇到的问题1

问题描述：failed to read the 'buffered' property from 'sourcebuffer': this sourcebuffer has been removed from the parent media source. flv

解决方案：

在appendMediaSegment方法和_needCleanupSourceBuffer中增加如下代码：

if (!this._mediaSource || this._mediaSource.readyState !== 'open') { return; }

如果还报错，则在实时流的地址每一次更新之前，进行销毁断流。

destoryVideo (flvPlayer) {
    if (flvPlayer) {
        flvPlayer.pause();
        flvPlayer.unload();
        flvPlayer.detachMediaElement();
        flvPlayer.destroy();
        flvPlayer = null;
    }
},

遇到的问题2：

问题描述：设置video标签播放的视频的宽高为其父元素的宽高并不生效。
解决方案：使用object-fit属性。例如：

<div class="video-realtime-div">
    <video
        style="width:100%;height:100%;object-fit:fill !important;"
        id="videoElement"
        autoplay
    ></video>
</div>

H5中实现滚动分页

1.实现方式1

滚动区域最外层需要一个设置固定高度的div，div设置垂直方向上显示滚动条：overflow-y: scroll;
div上监听scroll事件

<div class="third" @scroll.passive="getScroll($event)">
    <!-- v-for循环生成div -->
    <div
        class="wrapper"
        v-for="(event, index) of eventsObj"
    >
        <div
            class="img-wrapper"
            :class="
                eventKey === index ? 'high-light' : ''
            "
        >
            <!-- 点击超链接将详细事件信息传递给另一个组件-->
            <!-- 默认展示事件截图的第一张 -->
            <a
                @click="
                    handleClick(event, index, $event)
                "
                href="javascript:;"
                style="display: line-block"
            >
                <img
                    :src="event['warningDetail']['img']"
                    class="imgs"
                />
            </a>
        </div>
    
        <div class="box_text">
            <div class="text_17">
                {{ event.warningDetail.typeId
                }}<span class="text_18">(类型)</span>
            </div>
    
            <div
                :class="
                    event.warningDetail.handleStatus ===
                    0
                        ? 'text-unhandled'
                        : 'text-handled'
                "
            >
                {{
                    concreteEventStatus(
                        event.warningDetail.handleStatus
                    )
                }}
            </div>
        </div>
    </div>
    <p class="loading-text" v-show="isLoadingDone">
        已全部加载
    </p>
    <p v-show="!isLoadingDone && warningEventsNum !== 0" class="loading-text">
        {{ loadingText }}
    </p>
</div>
// scroll事件的回调函数
getScroll(event) {
    // 节流阀
    if (this.isLoding) {
        return;
    }
    if (this.searchObj.current >= this.pages) {
        this.isLoadingDone = true;
    }
    // 滚动条距离底部的距离scrollBottom
    let scrollBottom =
        event.target.scrollHeight -
        event.target.scrollTop -
        event.target.clientHeight;

    if (
        scrollBottom <= 1 &&
        this.searchObj.current < this.pages &&
        this.warningEventsNum >= 10
    ) {
        this.searchObj.current++;
        // 正在请求数据
        this.isLoding = true;
        this.getWarningVideoByFilter();
    }
},

2.实现方式2

使用el-scrollbar组件

预览图片

1.方式1：使用element ui中的el-image组件

el-image组件的preview-src-list属性：表示开启图片预览功能
el-image组件的z-index属性：设置图片预览的 z-index

<div class="imgs">
    <el-image 
        style="width: 100%; height: 60; z-index: 9999"
        src="http://demoai.kdainfo.com:32000/files/v1/87/Profile_1/result/20220821/8e9fa3f1b4a343c595d334d043c3d349_boat.jpg" 
        :preview-src-list="srcList">
    </el-image>
</div>

2.方式2：使用element ui中的el-image-viewer组件

3.方式3：使用v-viewer组件

posted on 2022-08-25 18:25 scrutiny-span 阅读(201) 评论(0) 编辑收藏举报

刷新页面返回顶部

导航