分类 前端 下的文章

首先安装Mock.js：

npm install mockjs --save-dev

参考官方文档创建配置文件：

const Mock = require('mockjs');
Mock.mock('/admin/worker/login', function () {
    return { 
        res: 1,
        msg: '登录成功'
    }
})
export default Mock

在main.js中引入上一步创建的配置文件：

//判断仅在开发环境引入
if (process.env.NODE_ENV == 'development') {
    require('./config/mock')
}

之后使用axios发起请求，地址匹配将会触发对应的规则，获取到配置文件中设置的数据

使用Axios时遇到的问题，在每个组件import一次太麻烦，所以百度查怎么进行全局注册，但是百度查到的都是Vue2的注册方法，照着改会在import Vue from 'vue'处报错，而Vue3更改了引入Vue的方法与全局注册的方法，以Axios举例：

Vue2 main.js：

import Vue from 'vue'
import Axios from 'axios'
Vue.prototype.$axios = Axios

Vue3 main.js：

import { createApp } from 'vue'
import App from './App'
import Axios from 'axios'
const app = createApp(App)
app.config.globalProperties.$axios = Axios

之后在组件中使用this.$axios即可调用

Vue3接口文档：https://staging-cn.vuejs.org/api/application.html#app-config-globalproperties

先前写过小程序，语法比较接近Vue2，最近开始学Vue3，在组件语法上有些区别

Vue2 的组件语法：

<template>
  HTML部分
</template>
<script>
export default {
    data() {
        return {
            is_loading: true
            //在此定义组件的变量
        }
    },
    methods: {
        getData: function () {}
        //在此定义组件的方法
    }
};
</script>

- 阅读剩余部分 -

使用回调函数操作页面数据或做路由跳转时不可直接使用this，回调函数中的this关键字并不是被执行方法中的this，所以会出错，可以定义一个that来保存被执行方法的this，在回调函数中使用that即可

const that = this
axios
.get("/api/index.php")
.then(function (res) {
  //直接使用that访问
  that.spinning = false
  that.$router.push({name: 'Index'})
})

生产环境可以通过Nginx反向代理等设置来解决，本地开发环境可以不指定接口地址，设置本地虚拟代理服务器来解决。

1、首先设置仅在生产环境生效的接口地址，在入口文件main.js加入：

import axios from 'axios';

if (process.env.NODE_ENV == 'production') {
    axios.defaults.baseURL = 'https://text.com/'; //生产环境接口地址
}

- 阅读剩余部分 -

添加以下css代码

html {-webkit-filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(graysale=1);}

如果没有生效修改<!DOCTYPE HTML>标签与标签即可

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

方法非常简单，首先引入 jquery.js 和 jquery.pjax.js

<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/jquery.pjax/1.9.6/jquery.pjax.min.js"></script>

然后在body内放一个div作为容器，并设置一个id，我设置的id是pjax-container。

<div id="pjax-container">
  //在此处放置跳转页面时要更新的部分
</div>

然后在容器外添加以下代码

<script type="text/javascript">
  $(document).pjax('a[href^="<?php Helper::options()->siteUrl()?>"]:not(a[no-pjax])', {
    container: '#pjax-container',
    fragment: '#pjax-container',
    timeout: 8000
  }).on('pjax:send', function() { //Pjax加载中执行
    $("#pjax_loading").show(); //显示遮罩层与加载动画
  }).on('pjax:complete', function() { //Pjax加载完成执行
    $("#pjax_loading").hide();  //隐藏遮罩层与加载动画
  });;
</script>

参考文章：https://www.ihewro.com/archives/354/

正常应该绑定事件，试了会没成功，就换了定时检查当前位置的方法

//定时执行，更改按钮状态
setInterval(function(){
  //判断当前位置是否处于顶部，是则显示按钮，否则隐藏
  if($(window).scrollTop() == 0){
    $('#back-top').hide();
  }else{
    $('#back-top').show();
  }
}, 100);

//点击按钮返回顶部
$('#back-top-btn').click(function() {
  $('body,html').animate({
    scrollTop: 0
  },1000);
  return false;
});
  1. 1
  2. 2