常州网站营销推广,电商网站系统建设,友情链接举例,网站建设软文1.VUE
1.下载和配置环境
使用vue编程#xff0c;我们需要使用到的编程软件是vs code#xff0c;还需要使用node.js#xff0c;这个的作用就类似于JDK#xff0c;当我们都下载好之后#xff0c;winR键打开命令提示符#xff0c;我们在这里可以查看版本#xff0c;
npm…1.VUE
1.下载和配置环境
使用vue编程我们需要使用到的编程软件是vs code还需要使用node.js这个的作用就类似于JDK当我们都下载好之后winR键打开命令提示符我们在这里可以查看版本
npm -v
然后需要设置我们的镜像
npm config set registry https://mirrors.huaweicloud.com/repository/npm/
我们也可以查看我们的镜像
npm config get registry
如果能查到我们的镜像就代表成功了 然后在d盘建一个文件夹名字叫easyvue我们在这个文件夹目录执行下面语句
npm create vitelatest 在执行完毕之后我们需要输入我们的新项目的名称比如easyvueb
然后依次选择vue和javascript虽然TypeScript也能选但是尽量使用java的在选择完毕之后我们就可以去vscode打开这个文件夹然后我们需要去配置我们的路由因为vue是单页面的我们为了实现页面之间跳转需要使用路由告诉页面需要向那个网页跳转我们需要先在中端输入以下语句下载路由
npm install vue-router
然后在src下面建立一个新的文件夹再新建一个文件叫index.js里面的代码如下
import {createRouter,createWebHashHistory} from vue-routerconst routercreateRouter({history:createWebHashHistory(),routes:[{path:/easy,component:()import(../views/easy.vue),children:[{path:/stafflist,component:()import(../views/stafflist.vue)}]}]}
);export default router;
第一行是代表导入了两个对象从vue-router文件中这个文件是我们的node-modules里面的是我们的配置文件如果没有子路由children包括后边的可以不写子路由是在浏览器页面中我们通过点击需要跳转到的页面比如我们在一个页面中需要查看表格就需要使用到我们的子路由。
在代码中路径部分意思是每当我们路径是访问easy的时候就是要访问views下面的easy.vue文件。最后一行代码代表是要导出这个路由这样才能被使用要不然其他文件里面导入不进去。
然后我们就需要在main.js文件夹下面导入这个路由然后使用这个路由
import router from ./router //导入路由语句createApp(App).mount(#app) //原本的//使用之后createApp(App).use(router).mount(#app)然后我们再中端下载axios
npm install axios
这个可以帮助我们进行前后端数据交互下载好了之后再src包下建一个新的文件夹util然后建一个文件 http.js在里面我们需要导入如下代码
import axios from axios;export default function (options) {//配置每次发送请求都从sessionStorage中获取名字叫token的数据,//添加到请求头部的Authorization属性中//Object.assign用于合并对象的数据options.headers Object.assign({ Authorization: sessionStorage.getItem(token) },options.headers || {});//axios() 返回一个promise对象用于异步请求//options是一个对象其中包含了许多用于配置请求的参数//例如请求的url、请求方法GET、POST等、请求头等return axios(options).then(({ status, data, statusText }) {//该函数在请求成功并返回数据时被调用//statusHTTP状态码例如200表示请求成功。//data服务器返回的数据。// statusTextHTTP状态文本例如OK表示请求成功。console.log(data);if (status 200) {return data;} else {throw new Error(statusText);}}).catch(e{return Promise.reject(e);//return Promise.reject(e.message);});
}
这样我们就可以进行数据交互了。也可以开始写项目了在src包下的view包下建一个文件easya.js在里面我们需要用到我们的三大标签script,template,style在template标签中键写h1easy page/h1,然后我们还需要在我们的app文件中将所有的都删除只留下三大标签还是在template中间写上router-view/router-view这是我们的视图占位符这时候我们启动项目
npm run dev
就可以在我们的浏览器看见easy page
2. 使用实例
VUE中有三大标签script,template,style
逻辑script里面是使用我们的javascript编写一般包含属性方法生命周期这里面用于处理数据逻辑事件处理
结构template模板是组件的可视化部分定义了组件的 HTML 结构。使用 Vue 的模板语法来绑定数据、渲染列表、条件渲染等。可以包含 Vue 的指令、插值表达式、事件绑定等
样式style样式定义了组件的外观和布局。可以使用 CSS、预处理器如 SASS、Less、CSS 框架如 Bootstrap等来编写样式。通常建议使用作用域样式以确保样式只应用于当前组
1.
如果我们想实现每当我们点击按钮我们的文本数字就增加1我们可以在template中间写
button clickchangenum按钮/button
在script标签中写
const numberref(12)
const changenumfunction(){console.log(changenumber method)number.valuenumber.value1;
}
就可以实现
2.是否显示
template
h1 v-textnumber v-ifshiwu/h1button clickchangeshiwu是否显示/button
script
const changeshiwufunction(){console.log(gaibian)shiwu.value!shiwu.value;
}
const shiwuref(true); 这样就可以实现如果本来是显示出来的点击之后可以小时否则反之 3.获取数据
定义好了一个数组之后获取数组里面的内容分别放在一个容器里面
template
div v-for(item,index) in arr classbox{{index}}:{{ item }}/div
style
.box{height: 50px;width: 50px;border: 1px solid black;margin: 10px;
}
script
const arrref([12,34,56,78]);
4. template
button clickgetData获取数据/button
script
const staffDataref({});const getDataasync(){staffData.valueawait easyAPI.get(/api/getstaff)console.log(staffData.value);
} 就可从数据库中获取数据但是这里面路径要是http://localhost:8080/getstaff
从数据库获取到的数据打印到浏览器 template
el-button typewarningWarning/el-button
tabletrtdid/tdtdcode/tdtdname/tdtdsalary/td/trtr v-for(item,index) in staffDatatd{{ item.id }}/tdtd{{ item.code }}/tdtd{{ item.name }}/tdtd{{ item.salary }}/td/tr
/table script
onMounted(async function(){let resultawait easyAPI.get(/api/getstaff);staffData.valueresult.data;console.log(staffData.value);
});
路径也要和刚才那样
3.api动态代理
在src包下建一个api文件夹在里面建一个index.js文件写下面代码 import http from ../util/http.js;const API{get:(url){return http({url:url,method:get})}
};
export default API;
在vite.config.js文件夹中写下面代码
import { defineConfig } from vite
import vue from vitejs/plugin-vue// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],server:{// 配置vite冷启动项目自动使用浏览器访问首页open:true,proxy: { /api: {target: http://localhost:8080,changeOrigin: true,rewrite: (path) path.replace(/^\/api/, ),},}}
})这样之后我们就可以和2.4一样写api就可以了如果以后端口号改变了只需要在这里面改一次就行不需要到处更改
