08 2024 档案
摘要：01、BaseController.php代码如下： <?php namespace App\Controllers; use CodeIgniter\Controller; use CodeIgniter\HTTP\CLIRequest; use CodeIgniter\API\ResponseT
阅读全文
摘要：01、ModelBase.php代码如下： <?php namespace App\Models; use CodeIgniter\Database\ConnectionInterface; use CodeIgniter\Model; use CodeIgniter\Validation\Vali
阅读全文
摘要：01、在composer.json中增加一行调用jwt的代码： { "name": "codeigniter4/appstarter", "description": "CodeIgniter4 starter app", "license": "MIT", "type": "project", "
阅读全文
摘要：01、我们创建一个数据库，如下： CREATE TABLE `user` ( `id` int(20) NOT NULL AUTO_INCREMENT, `username` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL D
阅读全文
摘要：01、在目录右键打开powershell，输入composer，能正常显示 02、输入composer config -g repo.packagist composer https://mirrors.aliyun.com/composer/ ，切换到国内镜像 03、输入composer crea
阅读全文
摘要：01、main.js代码如下： // 引入createApp用于创建Vue实例 import {createApp} from 'vue' // 引入App.vue根组件 import App from './App.vue' // 引入emitter用于全局事件总线 // import emitt
阅读全文
摘要：01、main.js代码如下： // 引入createApp用于创建Vue实例 import {createApp} from 'vue' // 引入App.vue根组件 import App from './App.vue' // 引入emitter用于全局事件总线 // import emitt
阅读全文
摘要：01、main.js代码如下： // 引入createApp用于创建Vue实例 import {createApp} from 'vue' // 引入App.vue根组件 import App from './App.vue' // 引入emitter用于全局事件总线 // import emitt
阅读全文
摘要：01、main.js代码如下： // 引入createApp用于创建Vue实例 import {createApp} from 'vue' // 引入App.vue根组件 import App from './App.vue' // 引入emitter用于全局事件总线 // import emitt
阅读全文
摘要：01、main.js代码如下： // 引入createApp用于创建Vue实例 import {createApp} from 'vue' // 引入App.vue根组件 import App from './App.vue' // 引入emitter用于全局事件总线 // import emitt
阅读全文
摘要：01、main.js代码如下： // 引入createApp用于创建Vue实例 import {createApp} from 'vue' // 引入App.vue根组件 import App from './App.vue' // 引入emitter用于全局事件总线 // import emitt
阅读全文
摘要：01、main.js代码如下： // 引入createApp用于创建Vue实例 import {createApp} from 'vue' // 引入App.vue根组件 import App from './App.vue' // 引入emitter用于全局事件总线 // import emitt
阅读全文
摘要：01、main.js代码如下： // 引入createApp用于创建Vue实例 import {createApp} from 'vue' // 引入App.vue根组件 import App from './App.vue' // 引入emitter用于全局事件总线 // import emitt
阅读全文
摘要：01、main.js代码如下： // 引入createApp用于创建Vue实例 import {createApp} from 'vue' // 引入App.vue根组件 import App from './App.vue' // 引入emitter用于全局事件总线 // import emitt
阅读全文
摘要：01、main.js代码如下： // 引入createApp用于创建Vue实例 import {createApp} from 'vue' // 引入App.vue根组件 import App from './App.vue' // 引入emitter用于全局事件总线 // import emitt
阅读全文
摘要：01、main.js代码如下： // 引入createApp用于创建Vue实例 import {createApp} from 'vue' // 引入App.vue根组件 import App from './App.vue' // 引入emitter用于全局事件总线 // import emitt
阅读全文
摘要：1、main.ts代码如下： // 引入createApp用于创建Vue实例 import {createApp} from 'vue' // 引入App.vue根组件 import App from './App.vue' // 引入emitter用于全局事件总线 // import emitte
阅读全文
摘要：01、main.js代码如下： // 引入createApp用于创建Vue实例 import {createApp} from 'vue' // 引入App.vue根组件 import App from './App.vue' // 引入emitter用于全局事件总线 // import emitt
阅读全文
摘要：01、main.js代码如下： // 引入createApp用于创建Vue实例 import {createApp} from 'vue' // 引入App.vue根组件 import App from './App.vue' // 引入emitter用于全局事件总线 import emitter
阅读全文
摘要：01、main.js代码如下： // 引入createApp用于创建Vue实例 import {createApp} from 'vue' // 引入App.vue根组件 import App from './App.vue' const app = createApp(App); // App.v
阅读全文
摘要：01、main.js代码如下： // 引入createApp用于创建Vue实例 import {createApp} from 'vue' // 引入App.vue根组件 import App from './App.vue' const app = createApp(App); // App.v
阅读全文
摘要：01、main.js代码如下： <template> <div class="app"> <h2 class="title">App.Vue</h2> <!-- <Page1/>--> <br> <Page2/> </div> </template> <script lang="ts" setup
阅读全文
摘要：01、main.js代码如下： // 引入createApp用于创建Vue实例 import {createApp} from 'vue' // 引入App.vue根组件 import App from './App.vue' //第一步：引入pinia import {createPinia} f
阅读全文
摘要：01、main.js代码如下： // 引入createApp用于创建Vue实例 import {createApp} from 'vue' // 引入App.vue根组件 import App from './App.vue' //第一步：引入pinia import {createPinia} f
阅读全文
摘要：01、main.js代码如下： // 引入createApp用于创建Vue实例 import {createApp} from 'vue' // 引入App.vue根组件 import App from './App.vue' //第一步：引入pinia import {createPinia} f
阅读全文
摘要：01、main.js代码如下： // 引入createApp用于创建Vue实例 import {createApp} from 'vue' // 引入App.vue根组件 import App from './App.vue' //第一步：引入pinia import {createPinia} f
阅读全文
摘要：01、main.ts代码如下： // 引入createApp用于创建Vue实例 import {createApp} from 'vue' // 引入App.vue根组件 import App from './App.vue' //第一步：引入pinia import {createPinia} f
阅读全文
摘要：01、输入npm install pinia 02、main.js代码如下： // 引入createApp用于创建Vue实例 import {createApp} from 'vue' // 引入App.vue根组件 import App from './App.vue' //第一步：引入pinia
阅读全文
摘要：01、使用powershell，输入npm i nanoid来安装： 02、App.vue代码如下： <template> <div class="app"> <h2 class="title">App.Vue</h2> <Page1/> <br> <Page2/> </div> </templat
阅读全文
摘要：01、index.ts代码如下： //创建路由并暴露出去 import {createRouter, createWebHistory} from 'vue-router' import Home from '@/view/Home.vue' import About from '@/view/Ab
阅读全文
摘要：01、main.js // 引入createApp用于创建Vue实例 import {createApp} from 'vue' // 引入App.vue根组件 import App from './App.vue' //引入路由 import router from './router' cons
阅读全文
摘要：01、main.js代码如下： // 引入createApp用于创建Vue实例 import {createApp} from 'vue' // 引入App.vue根组件 import App from './App.vue' //引入路由 import router from './router'
阅读全文
摘要：01、代码如下： <template> <div class="app"> <h2 class="title">App.Vue路由测试</h2> <!-- 导航区--> <div class="navigate"> <router-link replace to="/Home" class="nav
阅读全文
摘要：01、New.vue代码如下： <template> <div class="app-container"> <!-- 导航区域容器 --> <div class="sidebar"> <ul class="news-list"> <!--第一种写法--> <li v-for="news in ne
阅读全文
摘要：01、main.js代码如下： // 引入createApp用于创建Vue实例 import {createApp} from 'vue' // 引入App.vue根组件 import App from './App.vue' //引入路由 import router from './router'
阅读全文
摘要：01、Datail.vue代码如下： <template> <ul class="news-list"> <li>编号：{{ route.query.id }}</li> <li>编号：{{ route.query.title }}</li> <li>编号：{{ route.query.conten
阅读全文
摘要：01、main.js代码如下： // 引入createApp用于创建Vue实例 import {createApp} from 'vue' // 引入App.vue根组件 import App from './App.vue' //引入路由 import router from './router'
阅读全文
摘要：01、index.ts代码如下： //创建路由并暴露出去 import {createRouter, createWebHistory} from 'vue-router' import Home from '@/view/Home.vue' import About from '@/view/Ab
阅读全文
摘要：01、index.ts路由代码如下： //创建路由并暴露出去 import {createRouter, createWebHistory} from 'vue-router' import Home from '@/view/Home.vue' import About from '@/view/
阅读全文
摘要：01、main.js代码如下： // 引入createApp用于创建Vue实例 import {createApp} from 'vue' // 引入App.vue根组件 import App from './App.vue' //引入路由 import router from './router'
阅读全文
摘要：01、在main.js中引入路由并使用路由，代码如下： // 引入createApp用于创建Vue实例 import {createApp} from 'vue' // 引入App.vue根组件 import App from './App.vue' //引入路由 import router fro
阅读全文
摘要：01、在view中创建myhook文件夹，并创建2个文件。usesDog.ts代码如下： import {onMounted, reactive} from "vue"; import axios from "axios"; export default function () { // 抓取图片
阅读全文
摘要：01、App.vue代码如下： <template> <div class="app"> <h2>App.Vue</h2> <Person/> </div> </template> <script lang="ts" setup name="App"> // JS或TS import Person
阅读全文
摘要：1、App.vue代码如下: <template> <div class="app"> <h2>App.Vue</h2> <Person v-if="isShow"/> <button @click="isShow =!isShow">点我切换</button> </div> </template>
阅读全文
摘要：01、index.ts代码如下： // 定义一个接口，用于限制person对象的具体属性 export interface PersonInter { id: string; name: string; age: number; } export type Persons = Array<Perso
阅读全文
摘要：01、index.js代码如下: // 定义一个接口，用于限制person对象的具体属性 export interface PersonInter { id: string; name: string; age: number; } export type Persons = Array<Perso
阅读全文
摘要：01、新建一个index.ts文件，代码如下： // 定义一个接口，用于限制person对象的具体属性 export interface PersonInter { id: string; name: string; age: number; } export type Persons = Arra
阅读全文
摘要：01、App.vue代码如下: <template> <div class="app"> <h2>{{ title }}</h2> <!-- 使用了ref来获取子组件的属性--> <Person/> </div> </template> <script lang="ts" setup name="A
阅读全文
摘要：01、App.vue代码如下： <template> <div class="app"> <h2>{{ title }}</h2> <!-- 使用了ref来获取子组件的属性--> <Person/> </div> </template> <script lang="ts" setup name="A
阅读全文
摘要：1、App.vue代码如下： <template> <div class="app"> <h2>{{ title }}</h2> <!-- 使用了ref来获取子组件的属性--> <Person/> </div> </template> <script lang="ts" setup name="Ap
阅读全文
摘要：01、App.vue代码如下： <template> <div class="app"> <h2>{{ title }}</h2> <!-- 使用了ref来获取子组件的属性--> <Person/> </div> </template> <script lang="ts" setup name="A
阅读全文
摘要：1、App.vue代码如下： <template> <div class="app"> <h2>{{ title }}</h2> <!-- 使用了ref来获取子组件的属性--> <Person/> </div> </template> <script lang="ts" setup name="Ap
阅读全文
摘要：01、App.vue代码如下： <template> <div class="app"> <h2>{{ title }}</h2> <!-- 使用了ref来获取子组件的属性--> <Person/> </div> </template> <script lang="ts" setup name="A
阅读全文
摘要：01、App.vue代码如下： <template> <div class="app"> <h2>{{ title }}</h2> <!-- 使用了ref来获取子组件的属性--> <Person/> </div> </template> <script lang="ts" setup name="A
阅读全文
摘要：01、App.vue代码如下： <template> <div class="app"> <h2>{{ title }}</h2> <!-- 使用了ref来获取子组件的属性--> <Person/> </div> </template> <script lang="ts" setup name="A
阅读全文
摘要：01、App.vue代码如下： <template> <div class="app"> <h2>{{ title }}</h2> <!-- 使用了ref来获取子组件的属性--> <Person/> </div> </template> <script lang="ts" setup name="A
阅读全文
摘要：01、App.vue代码如下： <template> <div class="app"> <h2>{{ title }}</h2> <button @click="showLog">点我数组子页面年龄</button> <!-- 使用了ref来获取子组件的属性--> <Person ref="per
阅读全文
摘要：1、如果多个页面都用同一个id，那么就会报错。用ref可以指明是某个元素，规避报错情况。App.vue代码如下： <template> <div class="app"> <h2 ref="title2">好好学习，天天向上</h2> <button @click="showLog">点我输出h2元
阅读全文
摘要：1、App.vue代码如下： <template> <div class="app"> <h1>好好学习，天天向上</h1> <Person/> </div> </template> <script> // JS或TS import Person from './view/Person.vue' e
阅读全文
摘要：01、App.vue代码如下： <template> <div class="app"> <h1>好好学习，天天向上</h1> <Person/> </div> </template> <script> // JS或TS import Person from './view/Person.vue'
阅读全文
摘要：01、App.vue代码如下： <template> <div class="app"> <h1>好好学习，天天向上</h1> <Person/> </div> </template> <script> // JS或TS import Person from './view/Person.vue'
阅读全文
摘要：01、App.Vue代码： <template> <div class="app"> <h1>好好学习，天天向上</h1> <Person/> </div> </template> <script> // JS或TS import Person from './view/Person.vue' ex
阅读全文
摘要：01、App.vue代码如下： <template> <div class="app"> <h1>好好学习，天天向上</h1> <Person/> </div> </template> <script> // JS或TS import Person from './view/PersonNew.vu
阅读全文
摘要：01、App.vue代码如下： <template> <div class="app"> <h1>好好学习，天天向上</h1> <Person/> </div> </template> <script> // JS或TS import Person from './view/PersonNew.vu
阅读全文
摘要：01、App.vue代码如下： <template> <div class="app"> <h1>好好学习，天天向上</h1> <Person/> </div> </template> <script> // JS或TS import Person from './view/PersonNew.vu
阅读全文
摘要：01、以火狐浏览器维护，打开插件，搜索vue安装如图所示这个 02、安装好之后，F12就可以看到页面层级和具体内容了。
阅读全文
摘要：01、App.vue代码： <template> <div class="app"> <h1>好好学习，天天向上</h1> <Person/> </div> </template> <script> // JS或TS import Person from './view/Person.vue' ex
阅读全文
摘要：1、main.js代码如下： // 引入createApp用于创建Vue实例 import {createApp} from 'vue' // 引入App.vue根组件 import App from './App.vue' const app = createApp(App); // App.vu
阅读全文
摘要：1、npm install element-plus --save，安装UI 2、main.js代码如下： // import './assets/main.css' // 引入下面这两行 import ElementPlus from 'element-plus' import 'element-
阅读全文
摘要：1.App.vue代码如下： <template> <button @click="change">切换组件</button> <p></p> <keep-alive> <component :is="tabComponent"></component> </keep-alive> </templa
阅读全文
摘要：1、App.vue代码如下： <template> <button @click="change">切换组件</button> <p></p> <keep-alive> <component :is="tabComponent"></component> </keep-alive> </templa
阅读全文
摘要：1、App.vue代码如下： <template> <component :is="tabComponent"></component> <button @click="change">切换组件</button> </template> <script> import Child1 from "./
阅读全文
摘要：1、App.vue代码如下： <template> <div> <h3>主页面</h3> <button @click="change">改变</button> </div> </template> <script> export default { beforeCreate() { console
阅读全文
摘要：1、App.vue代码如下： <template> <div> <h3>主页面</h3> <Slot001> <template #s1="slotProps"> <h4>{{ msg }} {{ slotProps.msg1 }}</h4> </template> <template #s2="s
阅读全文
摘要：1、App.vue代码： <template> <div> <h3>主页面</h3> <Slot001 v-slot="slotProps"> <h4>{{ msg }} {{ slotProps.msg }}</h4> </Slot001> </div> </template> <script>
阅读全文
摘要：1、App.vue代码如下： <template> <div> <h3>插槽学习</h3> <Slot001> <!-- 插槽1--> <template v-slot:s2> <p>{{ msg1 }}</p> </template> <!-- 插槽2--> <template #s1> <p>{
阅读全文
摘要：1、App.vue代码如下： <template> <div> <h3>插槽学习</h3> <!-- 插槽1--> <Slot001> <p>{{ msg }}</p> </Slot001> <!-- 插槽2--> <Slot001> <!-- <p>{{ msg }}</p>--> </Slot0
阅读全文
摘要：1、App.vue代码如下： <template> <div> <h3>插槽学习</h3> <Slot001> <p>我是主页面</p> </Slot001> </div> </template> <script> import Slot001 from './view/Slot001.vue' e
阅读全文
摘要：1、App.vue代码如下： <template> <Father/> </template> <script setup> import Father from './view/Father.vue' </script> <style> </style> 2、Father.vue代码如下： <te
阅读全文
摘要：1、App.vue代码： <template> <Father/> </template> <script setup> import Father from './view/Father.vue' </script> <style> </style> 2、Father代码如下： <template
阅读全文
摘要：1、App.vue代码： <template> <Father/> </template> <script setup> import Father from './view/Father.vue' </script> <style> </style> 2、Father.vue代码： <templa
阅读全文
摘要：1、App.vue代码: <template> <Father/> </template> <script setup> import Father from './view/Father.vue' </script> <style> </style> 2、Father.vue代码： <templa
阅读全文
摘要：1、App.vue代码： <template> <Father/> </template> <script setup> import Father from './view/Father.vue' </script> <style> </style> 2、Father.vue代码： <templa
阅读全文
摘要：1、App.vue代码： <template> <Father/> </template> <script setup> import Father from './view/Father.vue' </script> <style> </style> 2、Father.vue代码 <templat
阅读全文
摘要：1、App.vue代码如下： <template> <Father/> </template> <script setup> import Father from './view/Father.vue' </script> <style> </style> 2、Father.vue代码如下： <te
阅读全文
摘要：1、App.vue代码如下： <template> <Father/> </template> <script setup> import Father from './view/Father.vue' </script> <style> </style> 2、Father.vue代码如下： <te
阅读全文
摘要：1、main.js代码如下： // import './assets/main.css' import {createApp} from 'vue' import App from './App.vue' import Config from "@/config.js"; import Testpa
阅读全文
摘要：1、一个经典的样式布局 2、App.vue代码如下： <template> <Header/> <Main/> <Aside/> </template> <script> import Aside from "./view/Aside.vue"; import Main from "./view/M
阅读全文
摘要：1、全局代码App.vue如下 <script setup> import Testpage001 from './view/Testpage001.vue' import Testpage002 from './view/Testpage002.vue' </script> <template>
阅读全文
摘要：1、代码如下: <template> <div ref="container" class="container">{{ caption }}</div> <input type="text" ref="username"> <button @click="getElementHandle">获取元
阅读全文
摘要：1、代码如下 <template> <h3>表单输入绑定</h3> <form> <!-- 编辑框内容变化时候，下面标签同步显示编辑框内容--> <input type="text" v-model:="username"> <P>{{ username }}</P> <!-- 编辑框内容变化时候，
阅读全文
摘要：01、代码如下： <template> <h3>侦听器</h3> <div>{{ msg }}</div> <button @click="undateHandle">修改</button> </template> <script> export default { data() { return
阅读全文
摘要：1、代码如下： <template> <div :style="{color:activeColor,fontSize:fontsize+'px'}">Style绑定1</div> <div :style="styleObject">Style绑定2</div> <div :style="[styl
阅读全文
摘要：1、App.vue代码如下： <script setup> import Testpage001 from './view/Testpage001.vue' </script> <template> <Testpage001/> </template> <style> </style> 2、如图所示
阅读全文
摘要：1、代码如下： <template> <h3>class绑定</h3> <div :class="{ 'active':isActive , 'text-danger':hasError }">Class样式绑定1</div> <div :class="classObject">Class样式绑定2
阅读全文
摘要：1、代码如下： <template> <h3>计算属性</h3> <div>{{ func1 }}</div> <div>{{ func1 }}</div> <div>{{ func1 }}</div> <!-- <div>{{ func1() }}</div>--> <!-- <div>{{ fu
阅读全文
摘要：1、代码如下： <template> <h3>数组变化侦听</h3> <button @click="addListHandle">添加数据</button> <ul> <li v-for="(item,index) of names" :key="index">{{ item }}</li> </
阅读全文
摘要：1、代码如下： <template> <h3>事件修饰符</h3> <a @click.prevent="clickHandle" href="http://www.baidu.com">百度</a> <div @click="click1"><p @click="click2">测试1</p></
阅读全文
摘要：1、代码如下 <template> <h3>事件传参</h3> <p @click="getNameHandler(item,$event)" v-for="(item,index) of names" :key="index">{{ item }}</p> </template> <script>
阅读全文
摘要：1、代码如下： <template> <h3>内联事件处理群</h3> <button @click="addCount1">Add</button> <p>{{ count1 }}</p> <button @click="addCount2('hello')">按钮</button> <p>{{
阅读全文
摘要：1、代码如下： <template> <h3>内联事件处理群</h3> <button @click="addCount">Add</button> <p>{{ count }}</p> </template> <script> export default { data() { return {
阅读全文
摘要：1、代码如下： <template> <h3>列表渲染</h3> <p v-for="(item,index) of names">序号：{{ index }}，内容：{{ item }} </p> <div v-for="item of result"> <p>ID:{{ item.id }},
阅读全文
摘要：01、代码如下： <template> <button @click="isCn = !isCn">转换</button> <h1 v-if="isCn">十年一梦学Vue!</h1> <h1 v-else>Ten years of dreaming of Vue!</h1> </template>
阅读全文
摘要：1、代码如下： <template> <div v-bind:id="myId1" v-bind:class="testCls" v-bind="objAttrs">测试1</div> </template> <script> export default { data() { return { t
阅读全文
摘要：1、代码如下： <template> <div v-bind:id="myId1" v-bind:class="testCls">测试1</div> <div v-bind:id="myId2" v-bind:title="testTitle">测试2</div> <div :id="myId3"
阅读全文
摘要：1、代码如下： <template> <div v-bind:id="myId" v-bind:class="testCls">测试</div> </template> <script> export default { data() { return { testCls: "appclass",
阅读全文
摘要：1、代码如下： <template> <h3>模板语法</h3> <p>{{ msg }}</p> <p>{{ msg_cn }}</p> <p>{{ number + 1 }}</p> <p>{{ ok ? 'Yes' : 'No' }}</p> <p>{{ message.split("").r
阅读全文
摘要：1、在App.vue中写入下面的代码 <template> <h3>模板语法</h3> <p>{{ msg }}</p> <p>{{ msg_cn }}</p> </template> <script> export default { data() { return { msg: "Hello W
阅读全文
摘要：CI4和VUE前端代码，可以看我在https://www.cnblogs.com/tianpan2019写的前2篇 运行CI4能正常打开 使用npm run dev 也可以正常打开VUE 根据https://www.cnblogs.com/tianpan2019前1篇把根目录设置成CI4的publi
阅读全文
摘要：安装node22.5 选择路径 安装完成 装好后使用cmd查看node -v和 npm -v，看一下就知道有没有装好了 nodejs的安装目录，需要完全授权才可以，不然后面会报错 在网站的根目录，打开Powershell 显示权限不足的错误 管理员模式打开系统的Powershell 输入set-Ex
阅读全文
摘要：安装git 选择路径 一路回车安装 安装phpstudy 安装好的界面 下载php8.2.9 点一下默认配置，确定 php版本要选择php8.2.9 需要安装的php扩展如下 点开网站的管理，设置一个根目录 php，启动 在根目录创建一个index.html的文件，用浏览器打开，看看能不能访问。没问
阅读全文
