axios配置
axios配置
关于Axios Axios,是一个基于promise的网络请求库,作用于node.js和浏览器中,它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequest。 全局配置 <body> <button onclick="search()">查询</button> <button onclick="add()">添加</button> </body> <script> // axios的配置 1.全局配置 2.自定义配置 axios.defaults.baseURL='http://localhost:8080/user' // 设置超时时间 axios.defaults.timeout = 3000 function search() { var url= 'search'; axios.get(url).then().catch(err=>{ console.log(err.message) }) } function add() { var url= 'add'; axios.get(url).then().catch(err=>{ console.log(err.message) }) } </script> 自定义配置 <body> <button onclick="search()">查询</button> <button onclick="add()">添加</button> </body> <script> // axios的配置 1.全局配置 2.自定义配置 const ax = axios.create({ baseURL:'http://localhost:8080/user', timeout:'3000' }); function search() { var url= 'search'; ax.get(url).then().catch(err=>{ console.log(err.message) }) } function add() { var url= 'add'; ax.get(url).then().catch(err=>{ console.log(err.message) }) } </script>
 2022-5-24
uni-app请求封装
uni-app请求封装
案例简介 基于promise封装请求,使用async await语法糖,参考插件市场,插件ID:niudandan-promise 详细使用 api.js const BASE_URL = '你的域名'; export const myRequest = (options)=>{ let token = uni.getStorageSync('token') return new Promise((resolve,reject)=>{ uni.request({ url: BASE_URL + options.url, // 将接口地址分为两部分,这样如果域名改变了好维护,接口地址从options中获取 header: { token: token, } || {}, method: options.method || 'GET',//默认Get data: options.data || {},// data从options中获取,如果没有传入data, 则默认一个空对象 success: (res) => { if (res.data.code === 1401) { } else { res } resolve(res); }, fail: (err) => { uni.showToast({ title: '请求接口失败', }); reject(err); }, }); }) } main.js //这个方法可能每个页面都会用到,我们可以在main.js中引入, import {myRequest} from 'api.js' //接收之后,挂载到全局,这样所有的页面都可以调用这个方法 Vue.prototype.$myRequest = myRequest; 使用方法:使用this.$myRequest进行调用 <button type="submit" @click="test()">发送请求</button> methods: { async test() { const res = await this.$myRequest({ url: '/api.php' }) this.dataa = res.data } }
 2022-5-11
Vue 服务端渲染
Vue 服务端渲染
小案例 // 1.创建vue实例 const Vue = require('vue') const server = require('express')() // 2.读取模板 const renderer = require('vue-server-renderer').createRenderer({ template:require('fs').readFileSync('./template.html','utf-8') }) // 3.处理Get方式请求 server.get('*',(req,res)=>{ res.set({'Content-Type':'text/html;charset=utf-8'}) const vm = new Vue({ data:{ title:'当前位置', url:req.url }, template: '<div>{{title}}:{{url}}</div>' }) // 4.将Vue 实例渲染为Html后输出 renderer.renderToString(vm,(err, html) => { if (err){ res.status(500).end('err'+err) return } res.end(html) }) }) server.listen(8080,function () { console.log('server started at localhost:8080') }) 模板文件 <!DOCTYPE html> <html> <head> <title>Title</title> </head> <body> <!--vue-ssr-outlet--> </body> </html>
 2022-5-10
Vue安装命令
Vue安装命令
设置淘宝镜像源 npm config set registry https://registry.npm.taobao.org 查看使用的镜像源 npm config get registry 安装淘宝镜像源 npm install -g cnpm --registry=https://registry.npm.taobao.org 卸载 npm uninstall vue-cli –g 打开命令行工具,通过npm方式全局安装@vue/cli脚手架,具体命令如下: npm install @vue/cli@3.10 –g 安装完成后,检测是否安装成功,使用如下命令来查看vue-cli的版本号: vue –V(或者vue --version) 上述命令运行后,结果如下所示: C:\vue>vue -V 3.10.0 使用vue create命令创建项目 vue create hello-vue(项目名) 项目创建完成后,执行如下命令进入项目目录,启动项目。 cd hello-vue npm run serve 项目启动后,会默认启动一个本地服务,如下所示 App running at: Local: http://localhost:8080/
 2022-5-3
Vuex搜索小案例
Vuex搜索小案例
什么情况下应该使用 Vuex? Vuex 可以帮助我们管理共享状态,并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。 如果不打算开发大型单页应用,应用够简单,最好不要使用 Vuex。一个简单的 store 模式就足够了。但是,如果需要构建一个中大型单页应用,就要考虑如何更好地在组件外部管理状态,Vuex 是不错的选择。 源代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> <script src="js/vuex.js"></script> </head> <body> <div id="app"> <h3>列表查询</h3> <input v-model="id" type="text"> <input v-model="name" type="text"> <input type="submit" @click="search" value="搜索id"> <input type="submit" @click="searchName" value="搜索name"> <hr> <p> 搜索结果{{this.$store.getters.search}} 搜索结果{{this.$store.getters.searchName}} </p> <ul> <li v-for="item in this.$store.state.todos">{{item}}</li> </ul> <!-- {{this.$store.state.id}}--> </div> </body> <script> //创建一个store对象 var store = new Vuex.Store({ getters:{ search:state=>{ return state.todos.filter(todo=>todo.id==state.id) }, searchName:state=>{ return state.todos.filter(todo=>todo.text.indexOf(state.name)!=-1) } }, state:{ todos:[ {id:1,text:'张三'}, {id:2,text:'李四'}, {id:3,text:'王五'}, {id:4,text:'赵六'}, {id:5,text:'刘星宇'}, ], id:0, name:"" }, //修改store对象中的数据 mutations:{ search(state,id){ state.id = id;//将store中的id修改 }, searchName(state,name){ state.name = name;//将store中的id修改 } } }) new Vue({ el:"#app", data:{ id:'', name: "" }, store, methods:{ search:function () { //调用mutations中的search方法 this.$store.commit('search',this.id); }, searchName:function () { //调用mutations中的search方法 this.$store.commit('searchName',this.name); } } }) </script> </html>
 2022-4-26
Vue路由小案例
Vue路由小案例
Vue路由 一些应用程序的 UI 由多层嵌套的组件组成。在这种情况下,URL 的片段通常对应于特定的嵌套组件结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> <script src="js/vue-router.js"></script> </head> <body> <div id="app"> <div style="width: 10%;height:600px;border:1px solid pink;"> <router-link to="/login">注册</router-link> <router-link to="/regist">登录</router-link> <router-link to="/grxx">个人信息</router-link> </div> <div style="width:60%;height:600px;border:1px solid blue;"> <router-view></router-view> </div> </div> </body> <script> // 创建三个组件 const login={ template:"<form action=\"\">\n" + " 用户:<input type=\"text\"><br>\n" + " 性别:<input type=\"radio\" name=\"sex\">男<input type=\"radio\" name=\"sex\">女<br>\n" + " 年龄:<input type=\"number\"><br>\n" + " <button>注册</button>\n" + "</form>" } const regist={ template: "<form action=\"\">\n" + " 用户:<input type=\"text\"><br>\n" + " 密码:<input type=\"password\"><br>\n" + " <button>登录</button>\n" + "</form>" } const grxx={ template:"<form action=\"\">\n" + " 姓名:<input type=\"text\"><br>\n" + " 性别:<input type=\"radio\" name=\"sex\">男<input type=\"radio\" name=\"sex\">女<br>\n" + " 年龄:<input type=\"number\"><br>\n" + " <button>确定</button>\n" + "</form>" } const vueRouter =new VueRouter({ mode:"history", routes:[ { path:'/login',component:login }, { path:'/regist',component: regist }, { path:'/grxx',component: grxx } ] }) new Vue({ el:"#app", router:vueRouter }) </script> <style> #app{ height: 600px; border:1px red solid; display: flex; } ul li{ margin-top: 15px; list-style: none; } </style> </html> 运行结果
 2022-4-5
Vue单文件组件
Vue单文件组件
课堂笔记.....
 2022-3-24
    模板
    插槽
    js
    递归算法
    javaScript
    QQ小程序
    缓存
    编程
    Vuex
    QQ
    node
    封装
    Spring-MVC
    PS
    新拟态效果
    VUE
    服务端
    箭头函数
    uniapp
    jQuery
    MYSQL
    表单提交
    微信
    弹性布局
    笔记
    电脑
    Vue脚手架
    邮箱验证
    Downie4
    Emlog小程序
    事件
    工具
    墨菲定律
    SEO
    Spring
    教程
    名片赞助手
    ajax
    文章
    插件
    IO流
    系统
    测试
    空间
    JSP
    robots
    Mybatis
    晚安心语
    伪静态
    PHP
    内容安全
    web
    自动化测试
    安装
    前端
    Python
    图片上传
    代码高亮
    源码
    小程序
    九一八事变
    数据库
    爬虫
    正则表达式
    Brief
    QQx
    SQL
    axios
    css
    三层架构
    说说
    promise
    代码
    轮播图
    Java
    Servlet
    组件
    铭记国耻
    HTML
    PhotoShop
    SSM
    nodejs
    Fabric
    教学
    Mac
    软件
    emlog
    页面
    Json
    下载
    Es6
    心情
    铭记
    图形
    微信小程序
    表白墙

Theme By Brief 鄂ICP备19010459号

站长统计 sitemap

首页

分类

友链

标签