vue cli 4.5 结合ts thinkphp5.1 mamp

创建项目

vue create 项目名称

在main.ts引入and

import And from 'ant-design-vue'
import "ant-design-vue/dist/antd.css"

app.use(and)

找到home页面，其实是一个模板

测试中可以看出还是很方便的

数据，方法直接在home里面就可以直接调用了

api 统一调用的方法

/**
 * axios 封装
 */

import axios from 'axios'
const TOKEN_INVALID = 'Token认真失败，请重新认证'
const NETWORK_ERROR = '网络异常，请稍后重试'

const service = axios.create({
    timeout: 8000
})

service.interceptors.response.use((res) => {
    const {code,data} = res.data
    if (code === 200) return data
},err => {
    // this.$message.error(msg || NETWORK_ERROR)
    return Promise.reject( 'NETWORK_ERROR')
})

/**
 *
 * @param {*} options 请求的配置
 * @returns
 */
function request(options:any) {
    if (options.method.toLowerCase() === 'get') {
        options.params = options.data
    }
    return service(options)
}


export default request

import request from "@/request";

export default {
    Login (params:any) {
        return request({
            url: 'https://www.fastmock.site/mock/f2a0ab67ac81641c4be683b35bd94043/api/users/login',
            method: 'post',
            data: params
        })
    },
    getData () {
        return request({
            url: 'https://www.fastmock.site/mock/a14f30a835adba71be928253ab4aedaf/xiaomi/products',
            method: 'get',
            data: {}
        })
    }
}

代理   那么前面baseUlr: '/api'

module.exports = {
    devServer: {
        host: 'localhost',
        port: 8080,
        proxy: {
            '/api': {
                target: 'http://aqd.cn:7070',
                changeOrigin: true,
                pathRewrite: { // 对请求路径进行重定向以匹配到正确的请求地址
                    '/api': ''
                }
            }
        }
    }
}

在做的过程中又好多问题也是查了很久才找到的问题

axios.d.ts      由于是ts会检查故

import axios from "axios";
declare module 'axios' {
    interface AxiosInstance {
        (config: AxiosRequestConfig): Promise
    }
}

dplayer的集成

npm i hls.js

dplayer.d.ts     不然就找不到dplayer   在src 下面创建即可

import DPlayer from "dplayer";

declare module 'dplayer' {

}

测试代码

如果网络请求中出现 403  

就在index.html  中添加 

路由hash   那么你访问就要   a href="/#/detail"   

带上id     a :href="`/#/detail/$(item.id)`" 

路由中定义   path:'/detail/:id'

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import Home from '../views/Home.vue'

const routes: Array = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/detail',
    name: 'Detail',
    component: () => import('../views/Detail.vue')
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

分页：

 Ant Design Vue

export default class Home extends Vue {
  params = {
    pageNum: 1,
    pageSize: 15
  }
  listD  = []
  total = 0
  mounted() {
    this.tt()
  }
  async tt() {
    const rr = await api.getData(this.params)
    this.listD = rr.list
    this.total = rr.total
  }
  onChange(page:any,pageSize:any) {
    this.params.pageNum = page
    this.tt()
  }
}

分页完成下面是完整代码

最后一个播放页面

我是一张表所以用数据库ID来查询，2张表查询方式不变

---

PHP制作api代码

    public function getUrl(Request $request) {
        $videoId = $request->param('id');
        $list = Db::table('aqd_video')->where('id',$videoId)->find();
        return json([
            'code' => 200,
            'data' => $list,
            'msg' => '请求数据成功'
        ]);
    }

    public function avData(Request $request)
    {
        $pageNum = $request->param('pageNum');
        $pageSize = $request->param('pageSize');
        $list = Db::table('aqd_video')->page($pageNum, $pageSize)->select();
        if ($list) {
            $count = Db::table('aqd_video')->count('id');
            $res = [
                'list' => $list,
                'pageNum' => $pageNum,
                'pageSize' => $pageSize,
                'total' => $count
            ];
            return json([
                'code' => 200,
                'data' => $res,
                'msg' => '请求数据成功'
            ]);
        } else {
            return json(['code'=>404, 'msg' => '请求失败', data=>[]]);
        }
    }

路由配置

Route::rule('avData','index/index/avData');
Route::rule('getUrl','index/index/getUrl');

---

router4.0

不够细有遇到问题了，如果你要做搜索页面肯定躲不过路由的跳转

看了好多网上的，官方的也看了，代码一样就是报错，人都嘛了，发现是自己没有理解它

{
    path: '/search',
    name: 'Search',
    component: () => import('../views/Search.vue')
  }

this.router.push({name:'',params:{}})

这个错误送给你Uncaught Error

修改   path: '/search/:title'       可以让你匹配携带参数

this.router.push({name:'Search',params:{title:xxx}})

取值 his.$route.params.title

name对应的一定是name的值   大小写要区分

params  的键只能是： 后面的字段

---

this.$router.push(`/search/${xx}`)   

取值 this.$route.query.title

搜索页面的代码

获取搜索的字段传入搜索页面

onSearch() {
    const key = this.value.trim()
    if (key !== '') {
      this.$router.push({
        name: 'Search',
        params: {
          title: key
        }
      })
    }

然后就是获取数据展示页面

理一下逻辑分页逻辑：首先你从主页跳转到搜索页面获取到搜索字段，定义变量确定是从主页获取的字段为FALSE，获取后台数据，展示数据，如果你是从本页面获取的搜索字段，将变量改为TRUE，相同操作

 

PHP代码 分页

 

   public function dd(Request $request) {
        $t2 = $request->param('keyword');
        $pageNum = $request->param('pageNum');
        $pageSize = $request->param('pageSize');
        $list = Db::table('aqd_video')
            ->where('title','like',"%$t2%")->page($pageNum,$pageSize)
            ->select();
        if ($list) {
            $count = Db::table('aqd_video')
                ->where('title','like',"%$t2%")
                ->count();
            $res = [
                'list' => $list,
                'pageNum' => $pageNum,
                'pageSize' => $pageSize,
                'total' => $count
            ];
            return json(['code'=>200, 'data'=> $res]);
        } else {
            return json(['code'=>404, 'msg'=> 'no data' ,data=>[]]);
        }
    }

 

---

父子组件值的传递     父传给子一个字段    子接收后将方法传给父监听（单项数据流）

子组件   简写@cliek="this.$emit('方法名')"     带参数就用下面的写法

添加向外传递的方法

emits: ['add','ads']   下面的是校验参数

父组件

---

下面是父子组件传值简化版本

利用v-model双向绑定

子组件

如果你不想用modelValue直接改成   v-model:app="keyword"

modelValue  替换成app就可以了

其实如果你想传入要搜索的字段，参数就可以了，

@Options({
  props: ['modelValue'],
  components: {
    MenuFoldOutlined,
    MenuUnfoldOutlined,TableOutlined,
    DisconnectOutlined,StarOutlined
  },
  emits:['addN'],
  methods:{
    onSearch() {
      this.$emit("addN",this.value)
    }
  }
})

export default class Head extends Vue {
  collapsed = false
  value = ''
  toggleCollapsed(e:any) {
    this.collapsed = !this.collapsed
  }
}

父组件接收方式不变

ad(v:string) {
    console.log(v)
  }

---

login

真的蛋碎了，ts 中 ref 属性要检测类型找到了最简单的写法

登录页面实现校验反馈，相对来说没有那么多繁琐的操作，定义对象Vue就全不帮你完成简直不要太爽

php登录代码，没有加中间件，jwt,md5验证，就简单登录

 public function login(Request $request) {
        $userName = $request->param('userName');
        $passWord = $request->param('passWord');
        $info = Db::table('aqd_user')->where('username',$userName)->find();
        if (!$info) {
            return json(['code' => 0, 'msg' => '账号不存在']);
        }
        if ($info['password'] !== $passWord) {
            return json(['code' =>0, 'msg' => '账号或密码错误']);
        }
        return json(['code' =>200, 'msg' => '登录成功','data'=>$userName]);
    }

搜索页面的分页，自己理解写的，大佬有更简单的方法可以交流下

第一次用这个ts 遇到好多坑，希望遇到的人可以不用到处找问题了，项目基本就可以跑通了，剩下的就是慢慢练习了