
本文共 10958 字,大约阅读时间需要 36 分钟。
���������������������
��� ThinkPHP6.0:
��� ElemetUI:
��� axios:
��� Vue:
������������������
���������������
git clone ������������������������ 0608
���������������
-- ��������������� 0608create database `0608` charset utf8;-- ��������������� usercreate table `user` ( `id` int(11) primary key auto_increment comment '������ID', `name` varchar(30) not null default '������' comment '���������', `pwd` varchar(32) not null default '������' comment '������������' ) engine = InnoDB;-- ��� user.name ������������������alter table `user` add unique key u_name(`name`);-- ��� user.pwd ������������������alter table `user` add index u_pwd(`pwd`);-- ��������������� schoolcreate table `school` ( `id` int(11) primary key auto_increment comment '������ID', `name` varchar(30) not null default '������' comment '���������', `city` varchar(30) not null default '������' comment '������������', `num` varchar(30) not null default '0' comment '������������') engine = InnoDB;
������������
cd 0608
������ThinkPHP6.0
composer create-project topthink/think php
���������������URL������
# ���������������������# url ������location / { # ������������������ if (!-e $request_filename) { rewrite ^(.*)$ /index.php?s=/$1 last; }}
������������������ .env ������������������������ .example.env���
APP_DEBUG = true[APP]DEFAULT_TIMEZONE = Asia/Shanghai[DATABASE]TYPE = mysqlHOSTNAME = 127.0.0.1DATABASE = 0608USERNAME = rootPASSWORD = rootHOSTPORT = 3306CHARSET = utf8DEBUG = true[LANG]default_lang = zh-cn
������������������������
// 1 .env ������������ 1 ���APP_DEBUG = true// 2 config/app.php ������ 33 ��� 'show_error_msg' => true
���������vue
������node���npm���cnpm���vue-cli������������������
// ������ node ������node -v// ������ npm ������npm -v// ������ cnpm ������cnpm -v// ������ vue ������vue -V// ���������������vue init webpack vue
������vue���������������������������������������
// ������ vue ���������cd vue// npm ������������npm run dev
������ Element-UI���axios
// ������ ElementUIcnpm install element-ui --save// ������ axioscnpm install axios --save
��� vue/src/main.js ���������������������
// ������ elementUI// https://element.eleme.cn/#/zh-CN/component/quickstartimport ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);// ������ axios// https://segmentfault.com/a/1190000013128858import axios from 'axios'Vue.prototype.$ajax = axios
���������������������������������������������
// ���������������cd 0608// ������������������������������������ git add ���git status// ���������������������git add ./// ������������������������Changes to be committed:���git status// ���������������������������git commit -m '������������'// ������������git status// ���������������������������������������git pull// ������������git status// ���������������������������������������git push
������������������������������������������������
// ���������������������������������������php think make:controller School// ������������������������������php think make:model School // ������������������ php/route/app.php// ���������������������->���������������Route::resource('school', 'School')->allowCrossDomain();
������ curd ������ - ��������� - School.php
getPage($pageSize); if ($res) { return json(['code' => 0, 'msg' => 'ok', 'res' => $res]); } else { return json(['code' => 1, 'msg' => 'no', 'res' => null]); } } /** * ���������������������������. * * @return \think\Response */ public function create() { // } /** * ��������������������� * ���post���http://0608.cc/school?name=shbw&city=&num=10000 * * @param \think\Request $request * @return \think\Response */ public function save(Request $request, ModelSchool $school) { // ������������ $data['name'] = $request->param('name', ''); $data['city'] = $request->param('city', ''); $data['num'] = $request->param('num', '0'); // ������������ $rule = [ 'name' => 'require|max:30|min:2', 'city' => 'require', 'num' => 'require' ]; $message = [ 'name.require' => '������������������������', 'name.max' => '������������������30���', 'name.min' => '������������������2���', 'city.require' => '������������������������������', 'num.require' => '������������������������������' ]; // ������������������������������->������������->������������ $validate = Validate::rule($rule)->message($message); if (!$validate->check($data)) { return json(['code' => 1, 'msg' => $validate->getError(), 'res' => null]); } // ������������ $res = $school->addOne($data); if ($res) { return json(['code' => 0, 'msg' => '������������', 'res' => $res]); } else { return json(['code' => 1, 'msg' => '������������', 'res' => $res]); } } /** * ��������������������� * ���get���http://0608.cc/school/3 * * @param int $id * @return \think\Response */ public function read($id, ModelSchool $school ) { $where['id'] = $id; $res = $school->selOne($where); if ($res) { return json(['code' => 0, 'msg' => '������������', 'res' => $res]); } else { return json(['code' => 1, 'msg' => '������������', 'res' => $res]); } } /** * ���������������������������. * * @param int $id * @return \think\Response */ public function edit($id) { // } /** * ��������������������� * ���put���http://0608.cc/school/3?name=bjbw3&city=bj3&num=30000 * * @param \think\Request $request * @param int $id * @return \think\Response */ public function update(Request $request, $id, ModelSchool $school) { // ������������ $where['id'] = $id; $data['name'] = $request->param('name', ''); $data['city'] = $request->param('city', ''); $data['num'] = $request->param('num', '0'); // ������������ $rule = [ 'name' => 'require|max:30|min:2', 'city' => 'require', 'num' => 'require' ]; $message = [ 'name.require' => '������������������������', 'name.max' => '������������������30���', 'name.min' => '������������������2���', 'city.require' => '������������������������������', 'num.require' => '������������������������������' ]; // ������������������������������->������������->������������ $validate = Validate::rule($rule)->message($message); if (!$validate->check($data)) { return json(['code' => 1, 'msg' => $validate->getError(), 'res' => null]); } // ������������ $res = $school->updOne($where, $data); if ($res) { return json(['code' => 0, 'msg' => '������������', 'res' => $res]); } else { return json(['code' => 1, 'msg' => '������������', 'res' => $res]); } } /** * ������������������ * ���delete���http://0608.cc/school/1 * * @param int $id * @return \think\Response */ public function delete($id, ModelSchool $school) { $where['id'] = $id; $res = $school->delOne($where); if ($res) { return json(['code' => 0, 'msg' => '������������', 'res' => $res]); } else { return json(['code' => 1, 'msg' => '������������', 'res' => $res]); } }}
������ curd ������ - ��������� - School.php
'int', 'name' => 'string', 'city' => 'string', 'num' => 'string' ]; /** * ������ */ public function getPage( $pageSize) { return self::paginate( $pageSize ); } /** * ������������������ */ public function addOne($data) { return self::insert( $data ); } /** * ������������ */ public function delOne($where) { return self::where( $where )->delete(); } /** * ������ */ public function updOne($where,$data) { return self::where( $where )->update( $data ); } /** * ������������ */ public function selOne($where) { return self::where( $where )->find(); }}
������Postman������ curd ������
# ������/������ gethttp://0608.cc/schoolhttp://0608.cc/school?page=2# ������ post http://0608.cc/school?name=shbw&city=&num=10000# ������ ID ������������ get http://0608.cc/school/3# ������ puthttp://0608.cc/school/3?name=shbw&city=&num=10000# ������ deletehttp://0608.cc/school/1
Vue���������������/������
// ��� vue/src/ ��������� page/school/{ list.vue,add.vue }// ������������ vue/router/index.jsimport Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'// ������������������import login from '@/page/main/login.vue'// ������������������import schoolList from '@/page/school/list.vue'import schoolAdd from '@/page/school/add.vue'import schoolEdit from '@/page/school/edit.vue'Vue.use(Router)export default new Router({ routes: [{ path: '/', name: 'HelloWorld', component: HelloWorld }, { path: '/login', name: 'login', component: login }, { path: '/schoolList', name: 'schoolList', component: schoolList }, { path: '/schoolAdd', name: 'schoolAdd', component: schoolAdd }, { path: '/schoolEdit', name: 'schoolEdit', component: schoolEdit } ]})
������������ - list.vue
������������ - add.vue
������������ ������ ������ ������������
������������ ������ ������ ������������
������ ������ ������������
发表评论
最新留言
关于作者
