composer create-project topthink/think=5.1.* www.site.com
php think make:controller index/Index
public function index()
{
return $this->fetch();#会自动定位到\application\index\view\index\index.html
}
静态文件会定位到public文件夹下面,所以修改路径的时候就以public为/:,然后抽出框架模板并继承:
{extend name="layout"}
和{block name="content"}{/block}
。
php think make:model Categorys
public function index()
{
$cate=new Categorys();
$cates=$cate->where('pid',0)->field('id,name')->select();
foreach($cates as $k=>$v){
$v['child']=$cate->where('pid',$v['id'])->field('id,name')->limit(5)->select();
}
$this->assign('cates',$cates);
return $this->fetch();
}
<div class="pntLeft">
<h2 class="Title">所有商品分类</h2>
<ul class="InPorNav">
{volist name="cates" id="vo"}
<li><a href="#">{$vo.name}</a>
<div class="chilInPorNav">
{volist name="vo.child" id="vv"}
<a href="#">{$vv.name}</a>
{/volist}
</div><!--chilLeftNav/-->
</li>
{/volist}
</ul><!--InPorNav/-->
</div><!--pntLeft/-->
composer create-project topthink/think=5.1.* www.system.com
cd www.system.com
php think make:controller system/Login
php think make:model Admins
login控制器进行了登录的get(index)和post(save)后端
namespace app\system\controller;
use think\Controller;
use think\Request;
use app\common\model\Admins;
class Login extends Controller
{
public function index()
{
return $this->fetch('login/index');
}
public function save(Request $request)
{
// 使用 input 函数接收前端发送的数据
$username = $request->post('username');
$password = $request->post('password');
// // 使用 $username 和 $password 处理后续逻辑
$db = new Admins();
$info = $db->where('username', $username)->find();
if (!$info) {
return json(['status' => 'fail','message' => '用户不存在']);
}
if ($info['password'] != md5($password)) {
return json(['status' => 'fail','message' => '用户或密码错误']);
}
session('aid', $info['id']);
session('aname', $info['username']);
return json(['status' => 'success','message' => '用登录成功']);
}
}
<?php
namespace app\common\model;
use think\Model;
class Admins extends Model
{
protected $table='admin';
}
前端使用了ajax进行异步验证
$(document).ready(function() {
$('#loginButton').click(function(event) { // 注意修改选择器为按钮的ID
event.preventDefault(); // 阻止默认的表单提交行为
var name = $('.name').val();
var pwd = $('.pwd').val();
var namelen = name.length;
var pwdlen = pwd.length;
// 进行表单验证
if (namelen < 3) {
alert("用户名不能小于3位,请重新输入!");
return false;
}
if (pwdlen < 3) {
alert("你输入的密码不正确,请重新输入!");
return false;
}
// 发送登录请求
$.ajax({
url: '/system/login/save',
type: 'POST',
data: {
username: name,
password: pwd
},
success: function(response) {
console.log(response);
if (response.status === 'success') {
window.location.href = '/system/index/index';
} else {
alert('登录失败,请检查用户名和密码!');
}
},
error: function(xhr, status, error) {
alert('请求出错,请稍后重试!');
}
});
});
});
application\system\view\login\index.html是在网上随便找的模板,其中css等静态文件放在public/static文件夹下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>17商城</title>
<link type="text/css" href="/static/css/css.css" rel="stylesheet" />
<script type="text/javascript" src="/static/js/jquery.js"></script>
<script type="text/javascript" src="/static/js/login.js"></script>
</head>
<body style=" background:#FFF;">
<div class="loginLogo">
<div class="logoMid">
<h1 class="logo" style="height:71px;padding-top:10px;"><a href="index.html"><img src="/static/images/loginLogo.jpg" width="241" height="71" /></a></h1>
<div class="loginReg">
还没有会员账号? <a href="reg.html">免费注册</a>
</div><!--loginReg/-->
</div><!--logoMid/-->
</div><!--loginLogo/-->
<div class="loginBox">
<div class="loginLeft">
<img src="/static/images/logoinimg.jpg" width="716" height="376" />
</div><!--loginLeft/-->
<form action="" class="loginRight">
<h2>会员登录</h2>
<h3>用户名</h3>
<input type="text" class="name" />
<h3>密码</h3>
<input type="password" class="pwd" />
<div class="zhuangtai">
<input type="checkbox" checked="checked" /> 下次自动登录
</div><!--zhuangtai/-->
<div class="subs">
<input type="button" value="登录" class="submit" id="loginButton" />
</div>
</form><!--loginRight/-->
<div class="clears"></div>
</div><!--loginBox/-->
</body>
</html>
这里的访问路径配置了好久,首先是在phpstudy里面设置根目录到public文件夹,然后高级配置里打开目录索引,然后在public目录下的.htaccess文件里写
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ index.php?/$1 [QSA,PT,L]
</IfModule>
然后就可以访问http://www.system.com/system/login/index/(域名/模块名/控制器名/方法名/)。
php think make:controller system/Base
<?php
namespace app\system\controller;
use think\Controller;
use think\Request;
class Base extends Controller
{
public function initialize()
{
parent::initialize();
if (!session('aid')){
$this->redirect('system/Login/index');
}
}
}
php think make:controller system/Index
1.首先针对主页的管理员名字和退出键做一个post的ajax请求处理
<a href="javascript:void(0);">{:session('aname')}</a>
<a class="outsys" title="退出系统" href="javascript:void(0);">退出</a>
#前端请求
$(document).ready(function(){
$('.outsys').click(function(){
$.ajax({
url: '/system/index/logout', // 这应该是你的后端退出路由
type: 'POST', // 或者是你需要的任何HTTP方法
success: function(){
// 当请求成功时,重定向到登录页面
window.location.href = '/system/login/index';
},
error: function(){
// 可选:当请求失败时,显示一条消息
alert('退出失败,请稍后再试');
}
});
});
});
#后端lagout处理函数
public function logout()
{
session('aname', null);
session('aid', null);
// 返回一个成功的响应
return json(['status' => 'success']);
}
开始做后台的商品分类
php think make:controller system/Category
php think make:model Categorys
2.按二级目录进行表格罗列。
class Category extends Base
{
public function index()
{
$cate=new Categorys();
$cates=$cate->where('pid',0)->field('id,name')->select();
foreach($cates as $k=>$v){
$v['child']=$cate->where('pid',$v['id'])->field('id,name')->select();
}
$this->assign('cates',$cates);
return $this->fetch('index/category');
}
#然后在前端把cates里的数据拿到进行显示
{block name="content"}
<body>
<h2>商品分类列表</h2>
<table>
<tr>
<th>一级分类名称</th>
<th>二级分类名称</th>
<th>操作</th>
</tr>
{volist name="cates" id="vo"}
{volist name="vo.child" id="vv"}
<tr>
<td>{$vo.name}</td>
<td>{$vv.name}</td>
<td>
<button class="btn btn-edit">编辑</button>
<button class="btn btn-delete">删除</button>
</td>
</tr>
{/volist}
{/volist}
<!-- 更多分类行可以继续添加 -->
</table>
</body>
{/block}
3.某二级类目进行删除
#1.前端请求
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn-delete").click(function(){
var categoryName= $(this).closest('tr').find('td:eq(1)').text(); // 获取要删除的分类名称
console.log(categoryName);
$.ajax({
url: 'delete', // 服务器端处理删除的 URL
type: 'POST',
data: {
categoryName: categoryName
},
success: function(response) {
// 处理服务器的响应
if(response.status === 'success') {
alert('删除成功!');
location.reload(); // 刷新页面
} else {
alert('删除失败!');
}
}
});
});
});
</script>
#2.后端查询删除操作
public function delete(Request $request)
{
$categoryName =$request->post('categoryName');
$db = new Categorys();
$info = $db->where('name', $categoryName)->find();
if (!$info) {
return json(['status' => 'fail','message' => '商品类目不存在']);
}
$result = $info->delete();
if($result) {
return json(['status' => 'success','message' => '删除成功']);
} else {
return json(['status' => 'fail','message' => '删除失败']);
}
}
4.某二级类目进行编辑操作