【前端——补充学习】解决emos项目报错、路由、组件

发布于：2022-12-28 ⋅ 阅读:(391) ⋅ 点赞:(0)

1.import  from 后面路径前面的@的意义

import { getToken } from '@/utils/auth'

解释：@这里就相当于一个代表符号，在vue.config.js当中定义，如下。在这段代码当中@就相当于src

configureWebpack: {
    name: name,
    resolve: {
      alias: {
        '@': resolve('src')
      }
    }
  },

2.组件

对数据和方法的简单封装

（1）每个 Vue 应用都是通过用 createApp 函数创建的，传递给 createApp 的选项用于配置根组件。当我们挂载应用时，该组件被用作渲染的起点。

  （2）使用方法

   

   

首先最最最最重要的一点是要导入

<script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>

第一步：写法是固定的

// 创建一个Vue 应用
const app = Vue.createApp({})

第二步，那我们已经创建了，然后我们就开始定义一个全局组件，那当然就要写这个组件里面的具体功能了。runoob为自定义的组件名字，到时候在html中使用的时候，就可以使用该标签名来使用组件

// 定义一个名为 runoob 的新全局组件
app.component('runoob', {
    template: '<h1>自定义组件!</h1>'
})

最后一步，为了使其能够在全局使用，我们就要挂载路由实例对象

app.mount('#app')

3.json是什么

JSON文件是用来存储简单的数据结构和对象的文件，可以在web应用程序中进行数据交换；

4.message.split('').reverse().join('')

    split(' ')是分裂的意思，也就是把一个数据拆分，会把数据拆分为一个数组,括号里的' '是把数据拆分为每个字符串的意思，如果不用就不会拆分成每个字符串

    reverse（）翻转的意思，因为只能对数组起作用，所以要跟在split(' ')后使用

    join(' ')是重组的意思，把数组合成一个字符串

5.阻止事件冒泡与默认行为

 click

6.路由router

<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script>

     在使用router之前，我们需要先导入。

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!--使用 router-link 组件进行导航 -->
    <!--通过传递 `to` 来指定链接 -->
    <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
    <router-link to="/">Go to Home</router-link>
    <router-link to="/about">Go to About</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

   router-link相当于a标签，to后面跟上跳转位置

    router-view，是路由匹配到的组件渲染的位置

JavaScript部分的代码

const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }
//或者可以导入组件
import Login from '../views/login.vue'

  首先是需要定义路由组件

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]

定义路由，component就映射到了上面我们我们定义的路由组件Hmoe和About

// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置，但我们在这里
// 暂时保持简单
const router = VueRouter.createRouter({
  // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
  history: VueRouter.createWebHashHistory(),
  routes, // `routes: routes` 的缩写
})

创建路由，传递routes（这里先全部不变照着写）

// 5. 创建并挂载根实例
const app = Vue.createApp({})
//确保 _use_ 路由实例使
//整个应用支持路由。
app.use(router)
 
app.mount('#app')

创建并挂载根实例，使得整个应用支持路由

     整个过程理解：

     点击带有router-link的文字之后，会跳转到to后面所写的位置，找到to后面pa对应的path，对应相应的组件，实现路由组件，使其内容渲染到router-views。app.mount里面是div标签的id，这样是的整个div都可以支持路由。

书写思路：

   我想要让他点击之后跳转，所以我需要router-link to进行跳转。

  那跳转之后需要有内容对吧，也就是定义路由，找到写to后面对应的path，在这个跳转的path我们要实现的内容就需要component引入。所以component后面的组件就需要先导入，所以欸，我import。最后为了使我整个routes能够在整个应用支持路由，别忘了app.use()

7.这个``符号

  使用情况：比如，某个名字是关键字，但是我们又想使用，就使用``，进行转义

权限管理系统部分知识理解

 1.登录按钮

（1）点击登录按钮进行跳转

<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">登录</el-button>

 @click.native.prevent="handleLogin"

   @：v-on的意思，就是绑定事件，比如点击。

    native：在封装好的组件（这里就是按钮）上使用，所以要加上.native才能click

   prevent:阻止一些默认行为；比如浏览器弹窗，默认测菜单选项

（2）点击之后调用handleLogin处理登录请求

     validate验证

this.$refs.loginForm.validate((valid) => {})

      使用表单验证validate前，检查prop一定必须要写在<el-form-item>上面，写在里面的input上或者其他任何地方都不行（el-form-item prop属性绑定）。例如这次的登录的代码

<el-form-item prop="username">
<el-form-item prop="password">

发送登录请求

this.$store.dispatch('user/login', this.loginForm)

    dispath：异步操作；commit:同步操作

    用来调用store中user.js的login方法

this.$router.push({ path: this.redirect || '/', query: this.otherQuery })

作用：修改路由，完成跳转

解释：登录成功的话那么就优先跳转到redirect路径，不成功直接跳到/(dashborad)同时将otherQuery作为query传入进来

this.$router.push传参的两种方式

    第一：使用name

this.$router.push({ name: this.redirect || 'home', params: this.otherQuery })

    第二：使用path

this.$router.push({ path: this.redirect || '/', query: this.otherQuery })

  1. query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在

  2. params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失

      相关博客：click

.then/.catch

if (valid) {
          this.loading = true//显示加载动画（开启进度条）
      
          this.$store.dispatch('user/login', this.loginForm)
            .then(() => {
             
              this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
              this.loading = false
            })
            .catch(() => {
              this.loading = false
            })
        }

知识来源：click

1、then()方法是异步执行。

当.then()前的方法执行完后
再执行then()内部的程序，这样就避免了，数据没获取到的问题。
通常用在ajax请求后面

2、catch()方法防止因为错误而造成系统崩溃

在程序逻辑中, 需要在易出现问题的逻辑代码片段上,
加持catch方法, 这样做可以捕获错误, 但是不会影响整个程序运转;

（3）如果表单验证通过，调用src/store/modules/user.js中的方法

//从用户信息userInfo中解构出用户名和密码
 const { username, password } = userInfo

知识来源：click
ES6允许按照一定模式，从对象和数组中提取值，这里就是把userInfo里面的属性username赋值给const定义的username，属性password赋值给password

new Promise

new Promise((resolve, reject) => {}

知识来源：click

  Promise是一个构造函数，自己身上有all、reject、resolve这几个眼熟的方法，原型上有then、catch等同样很眼熟的方法。这么说用Promise new出来的对象肯定就有then、catch方法

 login({ username: username.trim(), password: password })

Trim()
功能：删除字符串中多余的空格，但会在英文字符串中保留一个作为词与词之间分隔的空格。
语法：例如 ：username.trim()
参数string：string类型，指定要删除首部和尾部空格的字符串返回值String。函数执行成功时返回删除了string字符串首部和尾部空格的字符串，发生错误时返回空字符串（""）。 如果参数值为null时，会抛出空 指针异常。
 
username.trim() == null
 

commit（和dispath对照看）

//将返回的token数据保存到store中，作为全局变量使用
 commit('SET_TOKEN', token)

知识来源：click

 1.问题

（1）问题：工作流项目运行jar文件没有反应，java -jar emos-workflow.jar --spring.config.location=application.yml

 解决：右键——点击属性——点击更改 

 之后找到jdk下载文件中的bin下面的java.exe文件

 更改成功之后，图标恢复

 （2）问题：连接数据库报错

（2）问题，HBuilderX运行小程序报错

解决：升级sass插件即可

（3）问题 ：npm  i 报错

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: emos-vue@0.0.0
npm ERR! Found: vue@3.0.3
npm ERR! node_modules/vue
npm ERR!   vue@"3.0.3" from the root project

 解决：根据报错信息，按照他的指示，在npm i的时候加上--force：npm i --force

（4）问题：连接数据库显示没有驱动，下载驱动之后报错

       解决：点击弹出的设置http代理，在代理的位置选择无代理，即可解决

（5）问题：idea运行之后，报错ERROR  create connection SQLException, url

      解决：忘记修改文件中的数据库密码，修改为自己的密码之后，项目正常启动

（6）问题：启动微信小程序emos-wx-api报错

解决：检查了半天，原来是url写错，把划线部分写成下图这样子即可 

（1）问题：username的位置不显示效果

解决：new vue后面多了一个等号！！！！！！！，把等号去掉就可以了！！！！！，啊！！！

一周总结：

       这一周多，最大的体会是反省。学习上出了问题，着急想把前端的知识都看完，没有回头看看自己到底彻底掌握了多少，在做项目的时候，给自己找借口觉得才学这么点时间，看不懂正常，以后再慢慢看，就只会盲目试错，忘了不管是看视频还是做项目的根本目的是要学习到东西。反思前段时间，时间花了不少，却好像没学到什么。静下心来，回头复盘自己的笔记，惊奇的发现，原来这些东西我都看过都学过。

      还有重新回头，自己动手写，真的很生涩，就是学的时候没有多练，就导致连最基本的东西也不会写，所有东西都是带过，就会导致，后面东西多了，有一些东西会很像，很多东西就很晕，

    所以，看过不等于掌握，及时复习以及反复练习才能掌握（不然真的，一问三不知，和没学一样一样的，九敏）。这段时间复盘笔记，对照项目里面的代码，不仅对项目的一些逻辑有了更多的理解也对知识点的印象逐步加深了，像vue的基本语法框架，就会印象加深很多。

     虽然但是改报错真的，太花时间了，几乎一周百分之八十的学习时间都在改报错，所以这一周学习内容偏少。

     不过还是本周还是要注意学习内容的把握，每天都要学知识，不管或多或少。

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布