一、说明

实际工作中,一般只是新增/修改已有vue项目的页面,很少从零开始搭建一个新的vue项目。
在此简要总结下新增页面的开发方法。

二、步骤

1.首先找一个相似的页面,复制一份,修改为不同的名称。
(1)例如,有一个页面,位于这个文件夹:

E:\mobile-project\src\modules\user\user-config

其中有3个文件:

app.vue
main.js
tmpl.html

访问路径是:

http://localhost:10001/web-test/user/user-config.html?user=abc&sign=78d583f0176cd6b05ed92f225a88b

(2)可以把这个文件夹整个复制,放在相同的目录下,文件夹重命名为user-record,其中也是包含app.vue, main.js, tmpl.html这3个文件。
这样,就可以用以下路径访问到:

http://localhost:10001/web-test/user/user-record.html?user=1&sign=1

2.新文件夹中,main.js, tmpl.html一般不用修改,只修改app.vue文件即可。

3.如果要在其它页面新增按钮,跳转到这个新页面,可以参考以下方法:

      <a
        v-if="true"
        href="javascript:void(0);"
        v-on:click="jumpTo('user-record.html')"
        style="padding-bottom:15px;padding-top:15px"
      >
        跳转到user-record页面
      </a>
  methods: {
    jumpTo(destination) {
        window.location.href ="./user-record.html?user="+user+'&sign='+sign;
      }
    },
}

说明:
例如,在http://localhost:10001/web-test/user/user-config.html?user=abc&sign=78d583f0176cd6b05ed92f225a88b页面点击这个跳转按钮,就会跳转到http://localhost:10001/web-test/user/user-record.html?user=1&sign=1页面。(只把user-config.html换成user-config.html后跳转;./就是从当前位置开始的意思)

3_5.记录下import与export的用法


//这个其实没有用到
//这个的意思是,把项目src目录下的utils目录下的goto.js里的go方法与to方法引入,使得可以在这个页面使用这2个方法
import go, { to } from '@utils/goto'

--------------------------------------------------

goto.js样例如下:(如果想要让其它js可以使用这个方法,就需要这样写,export)
function to(path, options) {...}
function go(...args) {  ...}
export default go;
export { go, to };

4.跳转到新页面后,需要接收传来的参数,就可以在app.vue中这样写:

import param from '@utils/url-param'
const user = param('user')
const sign = param('sign')

这样就可以获取到参数,供后续使用。

url-param.js的内容样例如下:

let store = null;

function serialize(url) {
  if (url === '') return {};
  const search = url.match(/\?(.+)$/);
  if (!search) return {};
  const dict = search[1].split(/[&|]/ig);
  const params = {};
  dict.forEach((item) => {
    const [key, val] = item.split('=');
    params[key] = val;
  });
  return params;
}

export default function getURLParam(name) {
  if (!store) {
    const query = window.decodeURIComponent(window.location.search);
    store = serialize(query);
  }
  return store[name];
}

export { serialize };

注意,这里url-param.js导出的默认方法是getURLParam,所以当上方使用import param from '@utils/url-param'时,实际上相当于给getURLParam起了个别名叫param,使用param方法就是在使用getURLParam方法了。

5.新页面app.vue中,常用的几点如下:
(1)html标签中,可以使用v-if判断,值为true时才显示该标签,否则不显示。
(2)html标签中,可以使用v-on:click绑定点击事件方法
(3)v-for显示标签的样例如下:

  <div
          v-for="(p, index) in historyList"
          :key="index"
        >
          <div>第 {{ index + 1 }} 条数据</div>
          <div>
            <pre
              class="myclass"
              :class="{
                'list-class1': p.isAdmin == '1',
                'list-class2': p.isAdmin != '1',
              }"
              >{{ p.isAdmin == '1' ? '是管理员' : '不是管理员' }}</pre>
        </div>
  </div>

其中,historyList是一个json数组,在循环中用p.isAdmin就可以取到数组中的json的key为isAdmin的value值;index是循环的下标,从0开始。

historyList需要写在data()块的return{}里,如下:


data() {
    return {
    historyList: [],
    }
}

(4)methods块里可以写当前页面用到的方法,例如:

  methods: {
    init() {
        this.historyList = [{"user":"1","isAdmin":"1"},{"user":"2","isAdmin":"0"}]
    }
}   

注意,html标签中,直接使用historyList即可;script块中,使用的话需要用this.historyList

(5)created方法,当页面加载时会调用(也就是说,新跳入这个页面会调用;从其它页面返回这个页面,则不会调用)

  created() {
    console.log('cookie', document.cookie)
    this.init()
  },

同样,如果要用methods里的方法,也需要加this

(6)mounted方法,当页面出现时就会调用(新跳入这个页面会调用;从其它页面返回这个页面,也会调用)。

(7)const声明的变量,在script块中不需要加this就可以使用,但是在html标签中不能使用。(如果想在html块使用,可以在data块再声明一个变量,然后在created()方法中给这个变量赋值)

(8)then方法的意思是,前一个方法执行完成后,再执行then方法里的内容。
例如:

      this._findHistory(
        '1',
        'null'
      ).then(res => {
          this.historyList = res.data
          }
      })

其中,res是_findHistory方法执行后的返回结果。

(9)Promise.race方法,会同时执行其中的多个方法,其中哪个方法先执行完,就返回哪个方法的结果。样例如下:

Promise.race([
  				this._a(),
  				this._b()
				]).then(res => { console.log("a or b", res) 
				}).finally(res => {
					console.log("over",res)
					this._over()
				})

如果_a方法先执行完,"a or b"就打印_a的结果;
如果_b方法先执行完,"a or b"就打印_b的结果;
最后还会执行下_over方法。
(实际场景使用时,可以发2个给后台的请求、哪个返回的快就用哪个结果。)

10.Promise.all方法,也会执行其中的所有方法,返回值分情况:
(1)如果其中的方法都执行成功,Promise方法的状态就变成fulfilled,此时这些方法的返回值就组成一个数组,返回。
(2)只要其中的方法有一个被rejected,Promise方法的状态就变成rejected,此时返回第一个被reject的方法的返回值。

Logo

前往低代码交流专区

更多推荐