Vue项目建一个原神人物界面
前言
正好这几天在学习java web开发的部分。之前前端都是直接html+js无脑写法。今天想试试用Vue和Axios来写一个前端界面。试了一下才发现，确实还是框架好用，特别是Element组件库。
里面太多组件都非常好用，今天本来不知道写点啥，突然想到几天前看到有人开了个网站介绍了画江湖之不良人的人物介绍（我也是10年老粉了）。那我不放写一个原神的人物介绍吧！纯当试试前端开发，至于为啥是原神。因为今天看到一个芙宁娜的角色，一眼爱上了😊
💕💕💕😍😍😍😍😍😍😍😍😍
创建Vue项目
使用Vue-cli的ui界面创建一个项目
成功创建后就可以在VScode中打开
这里稍微介绍一下这些文件是啥
你问我图片哪来的。我只能说偷的 😋
接着直接启动server 这样就成功在8080端口开启了web server并且我们创建的目录的public目录作为根目录
最朴素的Vue初始界面
整体布局规划-在views目录下创建自定义组件文件
导入进App.vue 并直接标签调用就行了
这一步就是简答的布局，其实抄的Element
页面组件实现
原本这应该是最复杂的部分（如果用的是记事本直接写html）但这里直接使用Element舒服多了，不然这些代码可能得敲半天，大概就是容器布局，菜单，表单，表格，分页，对话框。然后注意Vue中的双向绑定关系还有各种组件文件的以来关系。
自创View.vue代码如下
<template>
<div>
<el-container style="height: 700px;border: 1px solid #eee;" >
<el-header style="font-size: 40px; background-color:rgb(238, 241, 246)">古希腊掌管原神的神</el-header>
<el-container>
<!--容器-->
<el-aside width="200px" style=" border: 1px solid #eee;">
<el-menu :default-openeds="['1', '3']">
<!--菜单-->
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>导航一</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">部门管理</el-menu-item>
<el-menu-item index="1-2">员工管理</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-menu"></i>导航二</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="2-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="3">
<template slot="title"><i class="el-icon-setting"></i>导航三</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="3-1">选项1</el-menu-item>
<el-menu-item index="3-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="3-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="3-4">
<template slot="title">选项4</template>
<el-menu-item index="3-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</el-aside>
<el-main>
<!--表单-->
<el-form :inline="true" :model="searchFrom" class="demo-form-inline">
<el-form-item label="姓名">
<el-input v-model="searchFrom.name" placeholder="芙宁娜"></el-input>
</el-form-item>
<el-form-item label="属性">
<el-select v-model="searchFrom.attribute" placeholder="属性">
<el-option label="火" value="0"></el-option>
<el-option label="水" value="1"></el-option>
<el-option label="风" value="2"></el-option>
<el-option label="雷" value="3"></el-option>
<el-option label="冰" value="4"></el-option>
<el-option label="草" value="5"></el-option>
<el-option label="岩" value="6"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
<!--表格-->
<el-table :data="tableData" border>
<el-table-column prop="name" label="名称" width="180">
</el-table-column>
<el-table-column prop="image" label="图像" width="250">
<template slot-scope="scope">
<img :src="scope.row.image" width="200px" height="170px">
</template>
</el-table-column>
<el-table-column prop="attribute" label="属性" width="180">
</el-table-column>
<el-table-column prop="job" label="称号" width="180">
</el-table-column>
<el-table-column prop="ability" label="描述" width="180">
</el-table-column>
<el-table-column label="操作">
<el-button type="primary" size="mini">编辑</el-button>
<el-button type="danger" size="mini">删除</el-button>
</el-table-column>
</el-table>
<!--分页条-->
<el-pagination
v-model="currentPage"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5,100, 200, 300, 400]"
page-size=5
layout="total, sizes, prev, pager, next, jumper"
:total="28">
</el-pagination>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
import axios from "axios";
export default{
data(){
return{ tableData:[],
searchFrom:{
name:"",
attribute:"",
},
}
},
methods:{
onsubmit(){
alert("还没开发捏！");
},
},
mounted(){
axios.get("list.json").then( result => {
this.tableData = result.data.data;
})
}
}
</script>
<style>
</style>
别看就这点代码，还是写了一晚上吧。主要是不停调试，很多东西直接复制上来也是不能用的，还有各种依赖关系很麻烦，而且这破环境老是崩，web server动不动就没了
最后axios异步加载数据了
以前总是好奇为什么搜索引擎可以预测我要搜索什么🧐，原来就是异步加载的方式
那么我们只需要在创建完Vue对象时直接请求获取提前写好的数据就能实现渲染了
关键就是直接一个axios访问，将获取的Json数据列表交给tableData
这个list.json时写好的json文件，可以说是小数据库
最后渲染一下就完成了，初步效果如下
当然很多接口还没有实现，比如查询。编辑等，而且人物介绍只是文字，图片
我本想加个gif，还有语音啥的但是写着写着居然12点了。。。。。。
这个项目之后我还会继续添加功能，我也期待能实现更好更强的功能😊
虽然我一把原神没玩过，但是没玩过≠不喜欢🤪
浙公网安备 33010602011771号