3.4. 新建收货地址

本教程最新版为 8.x,当前版本已放弃维护,请阅读最新版本!

新增收货地址页面

接下来我们要做的是新增收货地址的页面。

UserAddressesController 中新增一个 create() 方法:

app/Http/Controllers/UserAddressesController.php

use App\Models\UserAddress;
.
.
.
    public function create()
    {
        return view('user_addresses.create_and_edit', ['address' => new UserAddress()]);
    }
.
.
.

由于新增页面和编辑页面比较类似,所以共用一个模板文件 create_and_edit

然后添加一个路由:

routes/web.php

.
.
.
Route::group(['middleware' => ['auth', 'verified']], function() {
    .
    .
    .
    Route::get('user_addresses/create', 'UserAddressesController@create')->name('user_addresses.create');
});

1. 省市区联动组件

收货地址一个核心功能就是省市区三级联动下拉,这是一个比较复杂的前端操作,我们这里使用 Vue 来实现。

...

本文章首发在 LearnKu.com 网站上。

为了保证课程的高品质,我们需要对课程进行收费。付费后 才能观看剩余内容。 购买

上一篇 下一篇
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
贡献者:2
讨论数量: 98

小花儿
WIN10 安装 yarn add china-area-data 出错后解决方法
5 个点赞 | 3 个回复 | 分享 | 课程版本 5.5
ZcZmm
安装中文语言包问题
5 个点赞 | 0 个回复 | 分享 | 课程版本 5.5
kelvinblood
地区三级联动,新手容易只出现 {{name}} 的一个隐蔽原因
3 个点赞 | 10 个回复 | 分享 | 课程版本 5.7
proHorry
overture/lang 这个包崩了?
2 个点赞 | 15 个回复 | 问答 | 课程版本 5.5
瀚海栏杆
中文安装后不起作用
2 个点赞 | 4 个回复 | 问答 | 课程版本 5.7
robinfire
安装 overtrue/laravel-lang 语言扩展包注意选择版本号
2 个点赞 | 0 个回复 | 分享 | 课程版本 8.x
zxx123
三级联动 只有 {{ name }} ?
1 个点赞 | 10 个回复 | 问答 | 课程版本 5.5
doubidage
地区三级联动?只出{{name}},vue 没引入成功
1 个点赞 | 5 个回复 | 问答 | 课程版本 5.7
米朵
新增收货地址为什么显示出来一闪而过?
1 个点赞 | 5 个回复 | 问答 | 课程版本 5.5
danTing
请问当有外键约束时只有这一种创建资源的方法吗
1 个点赞 | 1 个回复 | 问答 | 课程版本 6.x
uu_boy
为什么地址联动不显示的问题?
0 个点赞 | 9 个回复 | 问答 | 课程版本 5.5
Jason_Lai
地区三级联动?
0 个点赞 | 9 个回复 | 问答 | 课程版本 5.5
夏天
为什么添加地址都不显示省市县呢
0 个点赞 | 8 个回复 | 问答 | 课程版本 5.7
18874127314
三级联动只有{{name}} 5.7 版本的
0 个点赞 | 8 个回复 | 问答 | 课程版本 5.7
gongmeng
裴雷
新建收货地址时报错
0 个点赞 | 7 个回复 | 问答 | 课程版本 5.7
maskers
关于省市级分类显示 $name 的一个问题
0 个点赞 | 6 个回复 | 问答 | 课程版本 7.x
yanger
新增收获地址 app.js 注册不上了——
0 个点赞 | 6 个回复 | 问答 | 课程版本 5.5
sunkai
This action is unauthorized.?未授权?
0 个点赞 | 6 个回复 | 问答 | 课程版本 5.5
surest
EIO: i/o error, close 怎么解决呢
0 个点赞 | 5 个回复 | 问答 | 课程版本 5.5
黄海鹏
地区三级联动不显示
0 个点赞 | 4 个回复 | 问答 | 课程版本 5.7
huzhuolei
案例中缺少邮编、手机号码格式判断
0 个点赞 | 4 个回复 | 问答 | 课程版本 5.5
zzskinp
代码提示的问题
0 个点赞 | 4 个回复 | 问答 | 课程版本 5.5
kdj1219
china-area-data 港澳台有 error 其他都可以用
0 个点赞 | 4 个回复 | 问答 | 课程版本 5.5
lianglunzhong
Mac yarn add 一直在等待?
0 个点赞 | 4 个回复 | 问答 | 课程版本 5.5
WindyLater
执行 Composer require overtrue/Laravel-lang 报错
0 个点赞 | 3 个回复 | 问答 | 课程版本 6.x
kirit0
出现{{name}}报错的看这里!!
0 个点赞 | 3 个回复 | 分享 | 课程版本 5.8
yanger
也页面打不开了,报 500。。
0 个点赞 | 3 个回复 | 问答 | 课程版本 5.5
HQY
三联动突然没有数据?
0 个点赞 | 3 个回复 | 问答 | 课程版本 5.5
赤色圣战
NPM run watch-poll 运行报错?
0 个点赞 | 3 个回复 | 问答 | 课程版本 5.5
learner
易恒
三级联动只有 {{name}}
0 个点赞 | 2 个回复 | 分享 | 课程版本 8.x
bing
执行 Composer require overtrue/Laravel-lang 报错
0 个点赞 | 2 个回复 | 问答 | 课程版本 6.x
maskers
关于中文语言包的问题
0 个点赞 | 2 个回复 | 问答 | 课程版本 7.x
wangying123
Laravel 商城省市区三级联动只显示{name}?
0 个点赞 | 2 个回复 | 问答 | 课程版本 7.x
tianlan
输出 $errors 中的错误信息不对头
0 个点赞 | 2 个回复 | 问答 | 课程版本 5.5
Sunny-
更改用户收货地址中收货地址是如何根据 id 变成相关数据的
0 个点赞 | 2 个回复 | 分享 | 课程版本 5.7
g-sabo
运行速度慢 点击新增地址要 15 秒
0 个点赞 | 2 个回复 | 问答 | 课程版本 6.x
zjnn
vue 的使用
0 个点赞 | 2 个回复 | 问答 | 课程版本 5.8
sufan
NPM run watch-poll 正常,安装 yarn add china-area-data 报错。
0 个点赞 | 2 个回复 | 问答 | 课程版本 5.8
Monica71725
访问 http://shop.test/user_addresses/create 出错!
0 个点赞 | 2 个回复 | 分享 | 课程版本 5.8
echopeimeng
提交一个省市区的 bug,
0 个点赞 | 2 个回复 | 分享 | 课程版本 5.8
validation 验证错误信息可以自己加中文语言包
0 个点赞 | 2 个回复 | 问答 | 课程版本 5.7
doubidage
我要跨页访问 地址的状态,但没有成功,请教。。。
0 个点赞 | 2 个回复 | 问答 | 课程版本 5.7
doubidage
新增收货地址 表单交报 403
0 个点赞 | 2 个回复 | 问答 | 课程版本 5.7
caston
报错信息是 validation.required but not province is required
0 个点赞 | 2 个回复 | 问答 | 课程版本 5.5
吃瓜群众
o => o === value [1] 是什么含义?
0 个点赞 | 2 个回复 | 问答 | 课程版本 5.5
Shine-x
为啥我的三级分类显示不出来
0 个点赞 | 2 个回复 | 问答 | 课程版本 5.5
HACK_QC
为什么提交的时候获取不到表单数据呢
0 个点赞 | 2 个回复 | 问答 | 课程版本 5.5
ishu
三级联动只有{{name}}的一种原因
0 个点赞 | 2 个回复 | 分享 | 课程版本 5.5
liuyi
使用 vue 的单文件组件编写省市区联动组件可以吗?
0 个点赞 | 2 个回复 | 问答 | 课程版本 5.5
HectorChan
填写收货地址这里有一个问题?
0 个点赞 | 2 个回复 | 问答 | 课程版本 5.5
Oyxiaoxi
安装中文语言包时报错?
0 个点赞 | 2 个回复 | 教程 | 课程版本 5.5
hsy
报错 [Vue warn]: Cannot find element: #App?
0 个点赞 | 2 个回复 | 问答 | 课程版本 5.5
18865477815
使用 win7 安装 yarn add china-area-data 出现错误?
0 个点赞 | 2 个回复 | 问答 | 课程版本 5.5
ekstar
没加载上数据怎么回事呢?
0 个点赞 | 2 个回复 | 问答 | 课程版本 5.5
EDISONYANG
为什么省市区没赋值成功呢?
0 个点赞 | 2 个回复 | 问答 | 课程版本 5.5
lalall
['address' => new UserAddress()] 的作用
0 个点赞 | 1 个回复 | 问答 | 课程版本 8.x
ReviveKWan
地区三级联动 只出现{{name}}的问题
0 个点赞 | 1 个回复 | 分享 | 课程版本 8.x
chenjs1998
npm run watch-poll 出错,也可能是china-area-data的版本问题
0 个点赞 | 1 个回复 | 分享 | 课程版本 6.x
三级联动数据不显示,只有{{ name }}
0 个点赞 | 1 个回复 | 问答 | 课程版本 7.x
我真叫阳阳
提交收货地址报错
0 个点赞 | 1 个回复 | 问答 | 课程版本 5.5
shenghuo1991
Sublime 编辑器代码追踪问题
0 个点赞 | 1 个回复 | 问答 | 课程版本 5.7
doubidage
<option v-for="(name, id) in districts" :value="id">@{{ name }}</option>
0 个点赞 | 1 个回复 | 问答 | 课程版本 5.7
doubidage
地区三级联动?只出{{name}},vue 怎么引入。vue.js 放在哪里
0 个点赞 | 1 个回复 | 教程 | 课程版本 5.7
myhyperion
验证失败后能否保留省市信息?
0 个点赞 | 1 个回复 | 问答 | 课程版本 5.5
mjg01
vue 报错 make sure to provide the "name" option.
0 个点赞 | 1 个回复 | 问答 | 课程版本 5.5
小丢丢
表单验证信息空格有办法去掉吗?
0 个点赞 | 1 个回复 | 问答 | 课程版本 5.5
silasyao
收货地址 index 页面
0 个点赞 | 1 个回复 | 问答 | 课程版本 5.5
小宝爹
汉化包不起作用?
0 个点赞 | 1 个回复 | 问答 | 课程版本 5.5
hsy
app.js 太大了?
0 个点赞 | 1 个回复 | 问答 | 课程版本 5.5
ekstar
提交后不出现错误提示?
0 个点赞 | 1 个回复 | 问答 | 课程版本 5.5
18865477815
Module build failed: Duplicate declaration "App"?
0 个点赞 | 1 个回复 | 问答 | 课程版本 5.5
yangyang2018
这个页面显示有地址,但是数据库里面什么没有数据的?
0 个点赞 | 1 个回复 | 问答 | 课程版本 5.5
yangyang2018
<user-addresses-create-and-edit inline-template>这句代码什么意思?
0 个点赞 | 1 个回复 | 问答 | 课程版本 5.5
david19931217
内联模板和 slot 区别?
0 个点赞 | 1 个回复 | 问答 | 课程版本 5.5
添加收货地址的时候,不能以 0 开头 ??
0 个点赞 | 1 个回复 | 问答 | 课程版本 5.5
jifeng123
npm run watch-polld 执行成功最后还是出现{{name}}报错
0 个点赞 | 0 个回复 | 问答 | 课程版本 8.x
xinxinx
overtrue/laravel-lang:~5.0 汉化包在提示报错并没有什么作用
0 个点赞 | 0 个回复 | 问答 | 课程版本 8.x
nicholas1119
vue 运行错误
0 个点赞 | 0 个回复 | 代码速记 | 课程版本 8.x
stefen
汉化包不起作用
0 个点赞 | 0 个回复 | 教程 | 课程版本 5.8
molangxx
省市区隐藏字段无法获取到值的一个可能原因
0 个点赞 | 0 个回复 | 分享 | 课程版本 5.5
Fykex
vue 组件通讯
0 个点赞 | 0 个回复 | 分享 | 课程版本 5.7
战狼1991
resource
0 个点赞 | 0 个回复 | 分享 | 课程版本 5.5
yangyang2018
什么回事???
0 个点赞 | 3 个回复 | 问答 | 课程版本 5.5