这个demo的由来,其实非常简单,企业在各个平台注册的账户都需要手机绑定,而这手机可能会因为人员流动问题而有变动,弄一个记录表登记持有人,方便其他人联系。
用到的技术项目,Vue+axios+tp5。
前端代码:
<!-- application/index/view/brand/index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>品牌手机号</title> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" /> <style> [v-cloak] { display: none; } </style> <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script> </head> <body> <div id="app"> <div class="container-fluid"> <div class="row"> <div class="col-lg-12 col-sm-12 col-md-12 col-xl-12"> <h1 class="text-center">品牌手机号查询</h1> </div> </div> <div class="row"> <div class="table-responsive col-lg-12 col-sm-12 col-md-12 col-xl-12"> <table class="table table-striped text-nowrap table-bordered"> <thead class="table-info"> <tr> <th>序号</th> <th>品牌</th> <th>手机号</th> <th>持有人</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="(result,index) of results" :key="index" v-cloak> <td> {{index+1}} </td> <td> {{result.name}} </td> <td> <input type="text" name="mobile" v-model="result.mobile" :disabled="index != isActive" /> </td> <td> <input type="text" name="owner" v-model="result.owner" :disabled="index != isActive" /> </td> <td> <div class="btn-group btn-group-sm" role="group"> <button type="button" class="btn btn-warning" @click="change(index)" > 修改 </button> <button type="button" class="btn btn-primary" @click="save(index)" > 保存 </button> </div> </td> </tr> </tbody> </table> </div> </div> <div class="row"> <div class="col-lg-12 col-sm-12 col-md-12 col-xl-12"> <footer class="text-center">网络部版权所有</footer> </div> </div> </div> </div> </body> </html> <script> // 页面加载初始化数据 window.addEventListener("load", function () { axios .get("http://192.168.0.122:8080/api/brand/index") .then(function (res) { // console.log(res.data); vm.results = res.data; // console.log(vm.results); }) .catch(function (error) { console.log(error); }); }); let vm = new Vue({ el: "#app", data: { isActive: -1, results: [], }, methods: { change(index) { // 点击索引 index this.isActive = index; }, // 保存更新的数据 save(index) { this.isActive = -1; let id = index + 1; let mobile = document.getElementsByName("mobile")[index].value; let owner = document.getElementsByName("owner")[index].value; console.log(mobile); console.log(owner); let formData = { id, mobile, owner, }; // console.log(formData); axios({ method: "post", url: "http://www.tp5.com:8080/api/brand/update", header: { "Content-Type": "application/json;charset=utf-8", }, data: formData, }) .then(function (res) { console.log("提交的数据成功:"); console.log(res); }) .catch(function (error) { console.log(error); }); }, }, }); </script>
接口路由配置:
// application/route.php //显示页面 Route::get('index/brand/index', 'index/brand/index'); // 后台接口数据 Route::get('api/brand/index', 'api/brand/index'); // 提交服务器接口 Route::post('api/brand/update', 'api/brand/update');
第一个是路由配置是首页,第二个路由配置是用于异步获取后台数据的,第三个则是前端修改的数据更新到后台数据库。
关于控制器配置:
//application/index/controller/Brand.php <?php namespace app\index\controller; use think\Controller; class Brand extends Controller { public function index() { return $this->fetch(); } }
以上用于访问显示页面。而接口控制器:
//application/api/controller/Brand.php <?php namespace app\api\controller; use think\Controller; use think\Request; use app\common\model\Brand as BrandModel; class Brand extends Controller { //显示 public function index(Request $request) { //api/brand/index header('Access-Control-Allow-Origin:*'); // 响应类型 header('Access-Control-Allow-Methods:GET'); $brands = collection(BrandModel::all())->toArray(); return json($brands); } //保存 public function update(Request $request) { header('Access-Control-Allow-Origin:*'); header('Access-Control-Allow-Methods:POST'); header('Content-Type:application/json;charset=utf-8'); if ($request->isPost()) { $id = $request->param('id'); $mobile = $request->param('mobile'); $owner = $request->param('owner'); $data['mobile'] = $mobile; $data['owner'] = $owner; $result = BrandModel::where('id', $id)->update($data); if ($result) { $this->success('更新成功!'); } else { $this->error('更新成功!'); } } } }
另外就是表结构:
调试过程中,可以通过浏览器控制台的异步链接对应的Preview或者Response来判断是否正确。
可以待改进和探讨的部分:
跨域配置(前端配置和后端配置,主要是后端起决定作用)
数据格式的校验(前端校验或者后端校验)
数据提交格式的选择(application/x-www-form-urlencoded和multipart/form-data )