IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> PHP知识库 -> 利用thinkphp创建一个物流原型系统 -> 正文阅读

[PHP知识库]利用thinkphp创建一个物流原型系统

本文将完成一个物流原型系统核心代码的编写。该系统采用thinkphp作为后端框架,bootstrap作为前端主框架,并使用百度地图api作为地图载体。

一、系统需求

系统需完成的功能包括:

  • 订单提交
  • 订单追踪(出发地、目的地、当前位置)
  • 地图集成(百度地图api)
  • 用户管理

二、技术基础

  • 后端:php,框架:thinkphp
  • 前端:bootstrap,jquery,百度api

关于thinkphp的核心学习可参考前一篇《利用thinkphp建立一个简单的站点》,其中介绍了该框架的基础入门教程。

三、系统设计

1、控制器及视图

由于是原型系统,所以在控制器上不分其他控制器,因此只需创建一个index的控制器,然后在该控制器的方法上做文章。视图文件也可就放在一个index文件夹中,方便调用。

2、数据库设计

user表:

  • id:int 8(用户编号)
  • name:varchar 20(用户名)
  • password:varchar 20(密码)
  • type:int 1(用户类型:用户、司机、管理员等)

order表:

  • id:int 8(订单编号)
  • start:varchar 50(订单起始地,位置信息用字符串描述)
  • end:varchar 50(订单目的地,位置信息用字符串描述)
  • time:varchar 50(订单上传时间)
  • lal:varchar 50(订单目前所处位置)

四、核心代码

1、index控制器

控制器index的核心代码如下:

<?php
namespace app\index\controller;

//引入多个包
use think\Controller;
use think\View;
use think\Db;
use think\Request;
use think\Session;

class Index extends Controller
{
    public function index()//首页
    {
        $DB=new Db;
        $order=$DB::table("order")->select();
        $this->assign('order',$order);
        $this->assign('name',Session::get('name'));
        $this->assign('type',Session::get('type')==0?"用户":"司机");
        return $this->fetch();
    }
    public function query()//查询页
    {
        if(request()->isPost()){
            $DB=new Db;
            $map['id']=input('id');
            $order=$DB::table("order")->where($map)->find();
            $this->assign('order',$order);
            return $this->fetch();
        }
        $this->error("错误");
        
    }
    public function view($id)//订单页
    {
        $DB=new Db;
        $map['id']=$id;
        $order=$DB::table("order")->where($map)->find();
        $this->assign('order',$order);
        return $this->fetch('query');
    }
    public function add()//添加订单
    {
        if(request()->isPost()){
            $data=[
                'start'=>input('start'),
                'end'=>input('end'),
                'time'=>time(),
            ];
            $DB=new Db;
            $DB::name('order')->insert($data);
        }
        $this->success("添加成功!");
    }
    public function del($id)//删除订单
    {
        $DB=new Db;
        $info=$DB::table("order")->where('id',$id)->delete();
        if($info){ 
            $this->success("删除成功!");
        }else{
            $this->error($file->getError());
        }
    }
    public function douser()//验证用户
    {
        $request = Request::instance();
        if(request()->isPost()){
            $m['name']=input('name');
            $m['password']=input('password');
            $DB=new Db;
            $userdata=$DB::table("user")->where($m)->find();
            if($userdata==null){
                return $this->error('用户名或密码错误!');
            }else{
                Session::set('name',$userdata['name']);
                Session::set('type',$userdata['type']);
                return $this->success('登录成功!',url('index/index'));
            }
        }
    }
    public function loginout()//注销
    {
        Session::delete('name');
        Session::delete('type');
        return $this->success('注销成功!',url('index/index'));
    }
}

在index控制器中,我们写了几个函数用于构建对应链接所导致的行为,如显示主页、查询页等页面,用户登录注销等操作以及添加订单等行为。

2、index.html主页

主页index.html的代码如下:

<html>
	<head>
		<title>物流信息原型系统</title>
		<!-- 引入css文件 -->
		<link rel="stylesheet" type="text/css" href="__HOME__/css/bootstrap.min.css" />
		<!-- 引入js文件 -->
		<script src="__HOME__/js/jquery-3.4.1.min.js"></script>
		<script src="__HOME__/js/bootstrap.min.js"></script>
		<script src="__HOME__/js/echarts.min.js"></script>
	</head>
	<body>
		<nav class="navbar navbar-dark bg-dark navbar-expand-lg mb-3">
			<a class="navbar-brand" href="{:url('index/index');}">物流信息原型系统</a>
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>
			<div class="collapse navbar-collapse" id="navbarSupportedContent">
				<ul class="navbar-nav mr-auto">
				<li class="nav-item dropdown">
					<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
					管理
					</a>
					<div class="dropdown-menu" aria-labelledby="navbarDropdown">
						<a class="dropdown-item" href="#">上传单号</a>
						<div class="dropdown-divider"></div>
						<a class="dropdown-item" href="#">管理单号</a>
					</div>
				</li>
				</ul>
				<form class="form-inline my-2 my-lg-0">
					<input class="form-control mr-sm-2" type="search" placeholder="单号" aria-label="Search">
					<button class="btn btn-outline-success my-2 my-sm-0" type="submit">查询</button>
				</form>
			</div>
		</nav>
		<div class="container">
			<div class="row">
				<div class="col-md-4 col-sm-12">
					{if condition="$Think.session.name == null"}
						<div class="card" style="width: 100%;">
							<div class="card-header">
								登录
							</div>
							<div class="card-body">
								<form method="post" action="{:url('index/douser');}">
									<div class="input-group mb-3">
										<div class="input-group-prepend">
										<span class="input-group-text">用户名</span>
										</div>
										<input name="name" type="text" class="form-control" placeholder="" aria-describedby="basic-addon1" value="">
									</div>
									<div class="input-group mb-3">
										<div class="input-group-prepend">
										<span class="input-group-text">密码</span>
										</div>
										<input name="password" type="password" class="form-control" placeholder="" aria-describedby="basic-addon1" value="">
									</div>
									<button id="count" type="submit" class="btn btn-primary btn-block mb-3" data-dismiss="modal">登录</button>
								</form>
							</div>
						</div>
					{else /}
						<div class="card" style="width: 100%;">
							<div class="card-header">
								个人信息
							</div>
							<div class="card-body">
								<div class="input-group mb-3">
									姓名:{$name}</br>
									类型:{$type}
								</div>
								<button type="submit" class="btn btn-primary btn-block mb-3" data-dismiss="modal">进入个人中心</button>
								<a href="{:url('index/loginout');}" class="btn btn-primary btn-block mb-3" data-dismiss="modal">退出</a>
							</div>
						</div>
					{/if}
					<br/>
					<div class="card" style="width: 100%;">
						<div class="card-header">
							查询订单
						</div>
						<div class="card-body">
							<form method="post" action="{:url('index/query');}">
								<div class="input-group mb-3">
									<div class="input-group-prepend">
									<span class="input-group-text" id="basic-addon1">单号</span>
									</div>
									<input name="id" type="text" class="form-control" placeholder="" aria-describedby="basic-addon1" value="">
								</div>
								<button id="count" type="submit" class="btn btn-primary btn-block mb-3" data-dismiss="modal">查询</button>
							</form>
						</div>
					</div>
					<br/>
				</div>
				<div class="col-md-8 col-sm-12">
					<div class="card" style="width: 100%;">
						<div class="card-header">
							最新订单
						</div>
						<div class="card-body">
							<table class="table">
								<thead>
								  <tr>
									<th scope="col">单号</th>
									<th scope="col">出发地</th>
									<th scope="col">目的地</th>
									<th scope="col">操作</th>
								  </tr>
								</thead>
								<tbody>
									{foreach $order as $data} 
										<tr>
											<th scope="row">{$data.id}</th>
											<td>{$data.start}</td>
											<td>{$data.end}</td>
											<td><a href="{:url('index/view');}/id/{$data.id}">查看</a></td>
										</tr>
									{/foreach}
								</tbody>
							  </table>
							
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

主页中用到了thinkph视图的输出函数,在无用户登录时显示登录框,在登录后显示用户个人信息框。同时在该页面集成查询、最新订单的显示等页面。

3、query.html查询页

查询也query.html的代码如下:

<html>
	<head>
		<title>物流信息原型系统</title>
		<!-- 引入css文件 -->
		<link rel="stylesheet" type="text/css" href="__HOME__/css/bootstrap.min.css" />
		<!-- 引入js文件 -->
		<script src="__HOME__/js/jquery-3.4.1.min.js"></script>
		<script src="__HOME__/js/bootstrap.min.js"></script>
		<script src="__HOME__/js/echarts.min.js"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=RODusGpnlcywQkMpTigghmhb5mfPu2Gf"></script>
	</head>
	<body>
		<nav class="navbar navbar-dark bg-dark navbar-expand-lg mb-3">
			<a class="navbar-brand" href="{:url('index/index');}">物流信息原型系统</a>
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>
			<div class="collapse navbar-collapse" id="navbarSupportedContent">
				<ul class="navbar-nav mr-auto">
				<li class="nav-item dropdown">
					<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
					管理
					</a>
					<div class="dropdown-menu" aria-labelledby="navbarDropdown">
						<a class="dropdown-item" href="#">上传单号</a>
						<div class="dropdown-divider"></div>
						<a class="dropdown-item" href="#">管理单号</a>
					</div>
				</li>
				</ul>
				<form class="form-inline my-2 my-lg-0">
					<input class="form-control mr-sm-2" type="search" placeholder="单号" aria-label="Search">
					<button class="btn btn-outline-success my-2 my-sm-0" type="submit">查询</button>
				</form>
			</div>
		</nav>
		<div class="container">
			<div class="row">
				<div class="col-md-4 col-sm-12">
					<div class="card" style="width: 100%;">
						<div class="card-header">
							查询订单
						</div>
						<div class="card-body">
							<form method="post" action="{:url('index/query');}">
								<div class="input-group mb-3">
									<div class="input-group-prepend">
									<span class="input-group-text" id="basic-addon1">单号</span>
									</div>
									<input name="id" type="text" class="form-control" placeholder="" aria-describedby="basic-addon1" value="{$order.id}">
								</div>
								<button id="count" type="submit" class="btn btn-primary btn-block mb-3" data-dismiss="modal">查询</button>
							</form>
						</div>
					</div>
					<br/>
					<div class="card" style="width: 100%;">
						<div class="card-header">
							管理订单
						</div>
						<div class="card-body">
							<form method="post" action="{:url('index/query');}">
								<div class="input-group mb-3">
									<div class="input-group-prepend">
									<span class="input-group-text" id="basic-addon1">当前位置</span>
									</div>
									<input id="lal" name="lal" type="text" class="form-control" placeholder="" aria-describedby="basic-addon1" value="">
								</div>
								<div class="input-group mb-3">
									<div class="input-group-prepend">
									<span class="input-group-text" id="basic-addon1">信息</span>
									</div>
									<input name="inf" type="text" class="form-control" placeholder="" aria-describedby="basic-addon1" value="">
								</div>
								<button id="count" type="submit" class="btn btn-primary btn-block mb-3" data-dismiss="modal">更新</button>
							</form>
						</div>
					</div>
					<br/>
				</div>
				<div class="col-md-8 col-sm-12">
					<div class="card mb-3" style="width: 100%;">
						<div class="card-header">
							订单信息
						</div>
						<div class="card-body">
							<div class="input-group mb-3">
								<div class="input-group-prepend">
									<span class="input-group-text" id="basic-addon1">单号</span>
								</div>
								<input type="text" class="form-control" placeholder="" aria-describedby="basic-addon1" value="{$order.id}">
								<div class="input-group-prepend">
									<span class="input-group-text" id="basic-addon1">出发地</span>
								</div>
								<input type="text" class="form-control" placeholder="" aria-describedby="basic-addon1" value="{$order.start}">
								<div class="input-group-prepend">
									<span class="input-group-text" id="basic-addon1">目的地</span>
								</div>
								<input type="text" class="form-control" placeholder="" aria-describedby="basic-addon1" value="{$order.end}">
							</div>
							<div class="input-group mb-3">
								
							</div>
							<div id="container" style="width:100%;height:500px"></div> 
						</div>
						<script type="text/javascript">
							var map = new BMap.Map("container");          // 创建地图实例 
							var curpoint = new BMap.Point({$order.lal});  // 创建点坐标 
							map.centerAndZoom(curpoint, 8);   // 初始化地图,设置中心点坐标和地图级别
							map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

							var myIcon = new BMap.Icon("__HOME__/img/1.png", new BMap.Size(50,32));
							var marker = new BMap.Marker(curpoint,{icon:myIcon});        // 创建标注   
							map.addOverlay(marker);                     // 将标注添加到地图中

							// 创建地址解析器实例
							var myGeo = new BMap.Geocoder();

							// 将地址解析结果显示在地图上,并调整地图视野
							myGeo.getPoint("{$order.start}", function(spoint){
								if (spoint) {
									map.addOverlay(new BMap.Marker(spoint));
									myGeo.getPoint("{$order.end}", function(epoint){
										if (epoint) {
											map.addOverlay(new BMap.Marker(epoint));
											var driving = new BMap.DrivingRoute(map, {
												renderOptions: {
													map: map,
													autoViewport: true 
												}
											});

											driving.search(curpoint, epoint);
											//调整视野
											map.setViewport([spoint, curpoint, epoint]); 
										}else{
											alert("您选择地址没有解析到结果!");
										}
									});
								}else{
									alert("您选择地址没有解析到结果!");
								}
							});
							
							//获取位置
							function getPosition() {
								if(navigator.geolocation){
									//navigator.geolocation.getCurrentPosition这个方法里面有三个参数
									//这个会在界面拉出一个消息框,让用户确认是否允许获取位置,不过pc端我试了都是err,
									//参1,成功后执行的函数
									//参2,失败时执行的函数
									//参3,选项配置,下面是在6000毫秒内结束请求
									navigator.geolocation.getCurrentPosition(
										function (position) {
											var latitude = position.coords.latitude;
											var longitude = position.coords.longitude;
											$('#lal').val(latitude+latitude);
										},
										/*function (error) {
											//处理错误
											switch (error.code) {
												case 1:
													alert("位置服务被拒绝。");
													break;
												case 2:
													alert("暂时获取不到位置信息。");
													break;
												case 3:
													alert("获取信息超时。");
													break;
												default:
													alert("未知错误。");
													break;
											}
										}*/
									)
								}
							}
							getPosition();
						</script>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

在该页面中最核心的代码是调用百度地图的api,该调用需要先申请ak密匙然后填入其中才可正确调用。

通过这样几步就能完成一个物流系统核心代码的编写。

  PHP知识库 最新文章
Laravel 下实现 Google 2fa 验证
UUCTF WP
DASCTF10月 web
XAMPP任意命令执行提升权限漏洞(CVE-2020-
[GYCTF2020]Easyphp
iwebsec靶场 代码执行关卡通关笔记
多个线程同步执行,多个线程依次执行,多个
php 没事记录下常用方法 (TP5.1)
php之jwt
2021-09-18
上一篇文章      下一篇文章      查看所有文章
加:2021-07-26 11:52:26  更:2021-07-26 11:52:31 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年3日历 -2024/3/28 21:48:27-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码