1、做的什么
本次大作业我是通过Angular前端开发平台做了一个网上购物网站，用户可以在网上填写自己的信息以及修改自己的信息，这些信息会在下面的提示栏内实时显示并且这些信息还可以保存，用户在下次打开这个页面的时候信息依旧存在。除此以外，我还做了一个购物车列表清单，用户可以选择自己想要的商品进行加入、删除、修改，如果已经选择了商品也即购物车不为空的情况下，刷新网页购物车的内容依旧还在，实现了保存数据的操作。用户选择完自己的商品之后点击购买按钮即可购买，并会自动清空购物车。大致的内容就是这样，增删改查技术分别对应于增加购物车的商品，删除购物车的商品，改变用户的信息，查看用户的信息。这些信息都存储在浏览器中的local storage中。
页面首页部分界面如下：
点击加入购物车时，下面就会实时显示你的购物车内容，同时价格也是实时更新，如下图：
点击清空购物车或者点击购买，购物车就不在显示了，如下图：
购买后提示：
点击填写个人资料就会转到content组件:
如下图：
点击确认，下方就会实时显示你的信息：
你可以随时更改以上信息，下方界面也会实时更改。
2、开发过程
在设计这个网页的过程中，我的想法是有一个home页面，用来存放商品的信息以及购买操作。然后用户点击下方的填写资料之后显示一个content页面， 如果用户填写了信息，那么在content页面下再显示一个消息提醒message页面，用来显示用户的资料，以供用户参考。这几个组件通过路由来连接。 home组件中就有商品信息、添加商品到购物车的按钮、购买按钮、删除购物车元素等操作。content组件中有一个用户填写内容清单，有text类型的input框，也有radio类型的input框 ，以及一个select框 ，还有一个checkbox的input框 ，最后是一个textarea。上述的每一个信息记录都用到了ngModel的angular技术即双向数据绑定，这极大的方便了后续储存值的操作，用户在网页中就可以实时改变他们的信息，看上去也更加人性化。message组件其实就是用来展示刚刚用户所填写的信息，并用到了一个父组件给子组件传值的方法，需要是用到input这个关键词，并且还需要引用才能用。也即是把content的一个userinfo的一个对象传给message组件，这样message组件就可以使用userinfo的一些属性以此来展示用户信息。
除此以外，存储信息、取出信息的操作我是设置了一个公共的服务来实现的，只需要每个组件在构造器中声明一个服务对象即可调用，十分的方便。
home组件部分代码如下：
<h1> 在线服装商城</h1> <a style="color: red; font-size: 30px; " target="_blank" href="https://blog.csdn.net/weixin_47978224/article/details/117673677" >报告地址:</a>
<hr>
<head><style>
body{background-color:whitesmoke ;
background-size:100%; }
</style>
</head>
<p style="font-size: 50px; color: red;">购买之前请先填写个人资料</p>
<body >
<header>
<div style="text-align: center;">
<img src="assets/images/rexiao.jpg">
<p style="font-size: 80px; color :red; text-align: center;">热销榜</p>
</div>
<div style="text-align: center;">
<ul>
<li>
<img class='rexiao' src="assets/images/shoe01.jpg">
<p class="title"> 名称:nike蓝白色运动鞋</p>
<p class="price"> 价格:132元 <button (click)="addshopcar('nike蓝白色运动鞋',132)"> 加入购物车 </button></p>
<img class='rexiao' src="assets/images/clothes01.jpg">
<p class="title"> 名称:粉红色卫衣</p>
<p class="price"> 价格:320元 <button (click)="addshopcar('粉红色卫衣',320)"> 加入购物车 </button></p>
<img class='rexiao' src="assets/images/kuzi02.jpg">
<p class="title"> 名称:nike运动裤</p>
<p class="price"> 价格:223元 <button (click)="addshopcar('nike运动裤',223)"> 加入购物车 </button></p>
</li>
</ul>
</div>
</header>
<br>
<hr>
<br>
<div class='content' style="text-align: center;">
<div class='item'>男士专区
<ul>
<li>
<img src="assets/images/clothes01.jpg">
<p class="title"> 名称:粉红色卫衣</p>
<p class="price"> 价格:320元 <button (click)="addshopcar('粉红色卫衣',320)"> 加入购物车 </button></p>
<img src="assets/images/clothes02.jpg">
<p class="title"> 名称:蓝色卫衣</p>
<p class="price"> 价格:620元 <button (click)="addshopcar('蓝色卫衣',620)"> 加入购物车 </button></p>
<img src="assets/images/clothes03.jpg">
<p class="title"> 名称:黑色卫衣</p>
<p class="price"> 价格:526元 <button (click)="addshopcar('黑色卫衣',526)"> 加入购物车 </button></p>
<img src="assets/images/kuzi02.jpg">
<p class="title"> 名称:nike运动裤</p>
<p class="price"> 价格:223元 <button (click)="addshopcar('nike运动裤',223)"> 加入购物车 </button></p>
<img src="assets/images/kuzi01.jpg">
<p class="title"> 名称:nike绿色运动裤</p>
<p class="price"> 价格:532元 <button (click)="addshopcar('nike绿色运动裤',532)"> 加入购物车 </button></p>
<img src="assets/images/shoe01.jpg">
<p class="title"> 名称:nike蓝白色运动鞋</p>
<p class="price"> 价格:132元 <button (click)="addshopcar('nike蓝白色运动鞋',132)"> 加入购物车 </button></p>
<img src="assets/images/shoe02.jpg">
<p class="title"> 名称:nike绿色运动鞋</p>
<p class="price"> 价格:220元 <button (click)="addshopcar('nike绿色运动鞋',220)"> 加入购物车 </button></p>
</li>
</ul>
</div>
<hr>
<br>
<br>
<div>
<div class="item" style="text-align: center;">女士专区</div>
<ul>
<li>
<img src="assets/images/gclothes01.jpg">
<p class="title"> 名称:红色卫衣</p>
<p class="price"> 价格:276元 <button (click)="addshopcar('红色卫衣',276)"> 加入购物车 </button></p>
<img src="assets/images/gclothes02.jpg">
<p class="title"> 名称:白色卫衣</p>
<p class="price"> 价格:325元 <button (click)="addshopcar('白色卫衣',325)"> 加入购物车 </button></p>
<img src="assets/images/gkuzi01.jpg">
<p class="title"> 名称:nike紫色运动裤</p>
<p class="price"> 价格:420元 <button (click)="addshopcar('nike紫色运动裤',420)"> 加入购物车 </button></p>
<img src="assets/images/gkuzi02.jpg">
<p class="title"> 名称:nike黑色运动裤</p>
<p class="price"> 价格:227元 <button (click)="addshopcar('nike黑色运动裤',227)"> 加入购物车 </button></p>
<img src="assets/images/gshoe04.jpg">
<p class="title"> 名称:nike高帮运动鞋</p>
<p class="price"> 价格:560元 <button (click)="addshopcar('nike高帮运动鞋',560)"> 加入购物车 </button></p>
<img src="assets/images/gshow03.jpg">
<p class="title"> 名称:nike粉红色运动鞋</p>
<p class="price"> 价格:128元 <button (click)="addshopcar('nike粉红色运动鞋',128 )"> 加入购物车 </button></p>
</li>
</ul>
</div>
</div>
</body>
<h2 style="text-align: center;">你的购物车</h2>
<div style="text-align: center;">
<ul>
<li *ngFor="let item of shopcarlist ,let key=index">{{item}} ---<button
(click)="deleteshopcarlist(item,key)">x</button></li>
<h3 *ngIf="shopcarlist.length!=0">价格: {{money}}</h3>
<button *ngIf="shopcarlist.length!=0" (click)="redo()">清空购物车</button>
</ul>
</div>
<div style='text-align: center'>
<button style="color: red; height: 50px; width: 100px; text-align: center; font-size: large; " (click)="buy()" *ngIf="shopcarlist.length!=0" > 一键购买 </button>
</div>
<div style="font-size: 40px;">
<a routerLink="/pcontent" routerLinkActive> 请填写你的个人资料 </a>
</div>
content组件部分代码如下：
<a routerLink="/home" style='font-size:40px'>返回商城</a>
<div style="text-align: center; font-size: 30px; ">填写个人信息</div>
<div style="text-align: center;">
<ul style="list-style: none;">
<li>姓名:
<input type='text' [(ngModel)]="userinfo.username" value="form_input">
</li>
<br>
<br>
<li>性别:
<input type='radio' value="1" name='sex' id='sex1' [(ngModel)]="userinfo.sex"><label for='sex1'>男</label>
<input type='radio' value="0" name='sex' id='sex2' [(ngModel)]="userinfo.sex"><label for='sex2'>女</label>
</li>
<br>
<br>
<li>
职业:
<select [(ngModel)]="userinfo. professional">
<option [value]="item" *ngFor="let item of userinfo.professionnallist">{{item}}</option>
</select>
</li>
<br>
<br>
<li>
你的喜好:
<span *ngFor="let item of userinfo.hobby;let key=index;">
<input type="checkbox" [id]="'check'+key" [(ngModel)]='item.checked'> <label [for]="'check'+key"> {{item.title}}</label>
</span>
</li>
<br>
<br>
<li>
收获地址:
<textarea cols='30' rows='10' [(ngModel)]="userinfo.shouhuoaddress"></textarea>
</li>
</ul>
<br>
<button (click)="dosubmit( )">确认</button>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<app-message [userinfo]="userinfo" *ngIf="flag"></app-message>
</div>
message 部分代码如下:
<hr>
<div>
<p >填写信息成功!!!</p>
<p></p>
<div style="font-size: 20px;">
你的信息为:
<br>
<h5 style="font-weight: 100;font-size: 40px;">姓名: {{userinfo.username}}</h5>
<br>
<div *ngIf='userinfo.sex==1'> 性别 :男 </div>
<div *ngIf='userinfo.sex==0'> 性别 :女 </div>
职业:{{userinfo.professional}}
<br>
<h2>爱好:</h2>
<div *ngFor="let item of userinfo.hobby;let key=index;" >
<h3 *ngIf='item.checked==1'>
{{item.title }}
</h3>
</div>
<br>
<h1 > 地址:{{userinfo.shouhuoaddress}}</h1>
</div>
</div>
获取数据、存取数据的服务代码如下：
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class StorageService {
constructor() { }
set(key:string,value:any){
localStorage.setItem(key,JSON.stringify(value));
}
get(key:string){
return JSON.parse(localStorage.getItem(key))
}
remove(key:string){
localStorage.removeItem(key);
}
}
保存购物车数据、获取购物车数据如下：在home组件的ts文件内：
import { Component, OnInit } from '@angular/core';
import{StorageService}from '../../services/storage.service'
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
public keyword:string;
public money:any=0;
public shopcarlist:any[]= [
];
public pricelist:any[]=[];
public number:any=0;
constructor( public storage:StorageService) { }
ngOnInit(): void { //**这里就是浏览器获取历史记录的地方**
let preshopcarlist:any=this.storage.get('shopcarlist');
if(preshopcarlist)
{
this.shopcarlist=preshopcarlist;
}
let prepricelist:any=this.storage.get('pricelist');
if(prepricelist)
{
this.pricelist=prepricelist;
for(var i=0;i<this.pricelist.length;i++)
{
this.money=this.money+this.pricelist[i];
}
}
}
addshopcar(key:any,number:any){
this.shopcarlist.push(key);
this.pricelist.push(number);
this.storage.set('shopcarlist',this.shopcarlist);
this.storage.set('pricelist',this.pricelist);
this.money=this.money+number;
}
deleteshopcarlist(item:any,key:any){
this.number=this.pricelist[this.shopcarlist.indexOf(item)];
this.pricelist.splice(this.shopcarlist.indexOf(item),1);
this.shopcarlist.splice(key,1);
this.storage.set('shopcarlist',this.shopcarlist);
this.storage.set('pricelist',this.pricelist);
this.money=this.money-this.number;
}
buy(){
alert('购买成功!!!');
this.shopcarlist.splice(0,this.shopcarlist.length);
this.pricelist.splice(0,this.pricelist.length);
this.storage.set('shopcarlist',this.shopcarlist);
this.storage.set('pricelist',this.pricelist);
this.money=0;
}
redo(){
this.shopcarlist.splice(0,this.shopcarlist.length);
this.pricelist.splice(0,this.pricelist.length);
this.storage.set('shopcarlist',this.shopcarlist);
this.storage.set('pricelist',this.pricelist);
this.money=0;
}
}
保存用户数据、获取用户数据的代码如下：
@Component({
selector: 'app-pcontent',
templateUrl: './pcontent.component.html',
styleUrls: ['./pcontent.component.css']
})
export class PcontentComponent implements OnInit {
public keyword:string;
public flag:boolean=false;
public userinfo:any={
username:"无",
sex:'1',
professionnallist:['学生','公务员','私人企业员工','老板','无'],
professional:'学生',
shouhuoaddress:"",
hobby:[{
title: '休闲',
checked: 0,
},
{
title: '运动',
checked: 0,
},
{
title: "简洁",
checked:0,
},
{ title:"潮流",
checked:0,
},
],
}
constructor(public storage:StorageService) { }
ngOnInit(): void {
let prename:any=this.storage.get('name');
if(prename)
{
this.userinfo.username=prename;
}
let presex:any=this.storage.get('sex')
if(presex)
{
this.userinfo.sex=presex;
}
let preshouhuoaddress:any=this.storage.get('shouhuoaddress')
if(preshouhuoaddress)
{
this.userinfo.shouhuoaddress=preshouhuoaddress;
}
let prepro:any=this.storage.get('pro')
if(prepro)
{
this.userinfo.professional=prepro;
}
let precheck1:any=this.storage.get('checked1')
if(precheck1)
{
this.userinfo.hobby[0].checked=precheck1;
}
let precheck2:any=this.storage.get('checked2')
if(precheck2)
{
this.userinfo.hobby[1].checked=precheck2;
}
let precheck3:any=this.storage.get('checked3')
if(precheck3)
{
this.userinfo.hobby[2].checked=precheck3;
}
let precheck4:any=this.storage.get('checked4')
if(precheck4)
{
this.userinfo.hobby[3].checked=precheck4;
}
}
dosubmit(){
alert('信息填写成功！！！,请在下方核对你的信息');
this.flag=true;
this.storage.set('name', this.userinfo.username);
this.storage.set('sex',this.userinfo.sex);
this.storage.set('shouhuoaddress',this.userinfo.shouhuoaddress);
this.storage.set('pro',this.userinfo.professional);
this.storage.set('checked1',this.userinfo.hobby[0].checked);
this.storage.set('checked2',this.userinfo.hobby[1].checked);
this.storage.set('checked3',this.userinfo.hobby[2].checked);
this.storage.set('checked4',this.userinfo.hobby[3].checked);
}
}
路由代码如下:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './components/home/home.component';
import { MessageComponent } from './components/message/message.component';
import { PcontentComponent } from './components/pcontent/pcontent.component';
const routes: Routes = [
{path:'home',component:HomeComponent},
{path:'pcontent',component:PcontentComponent},
{path:'message',component:MessageComponent},
{path:'**',redirectTo:'home'},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
3、遇到的问题，如何解决。
本次实验由于使用的是angular的动态网页的技术，问题肯定是很多的。主要问题有以下几个：
1、我最初的想法是用户点击商品图片即可查看图片的详情。
2、不知道商品数据从哪里获取，最初是想通过httpclient的angular技术来在线获取数据。
3、不知道如何保存信息。
4、路由、服务、组件的概念使用不清楚。
5、js的一些模块不清楚，例如input输入框什么的。
6、不知道如何用好CSS。
大概就是这六个问题，自己也在网上查阅了许多的资料看能不能解决它们。
通过查阅资料我得知组件就是一个独立的内容，可以在另外一个组件页面中调用它们。服务（公共的方法）,供组件使用（非父子组件的传值）。路由就是设置页面的导航，路由要在app-module引入并且声明。保存信息我看到了在网上就是可以存在local storage中 例如这样的localStorage.setItem(key,JSON.stringify(value));方法
CSS样式我在网上稍微学习了一下，但是还是不太美观，需要改进。
四、未解决的问题
1、2问题还未解决。
我在网上查阅httpclient看到如果使用这一技术需要部署自己的api接口，也即是一个url网站。我需要创立一个网站来提供数据或者找一个网站来为我提供数据，然后我在网上又看了许多关于这方面的问题发现部署自己的网站接口实在是有一点麻烦自己现在也没很多时间去专研，并且也没有找到合适的网站为我提供数据。因此这个问题就没有解决。我只能通过人为的搜索资料来放到我的项目中去，人为的收集图片与信息，显得不是特别好。点击图片查看详情这个功能我也在网上搜了一下，它仍然是需要很多的数据来支撑，由于我之前没有部署自己网站因此这个功能也就没办法实现了。总的来说我没有实现的问题就是不能够在线获取数据，以后还要朝着这个方向继续学习。
五、总结
本次实验通过使用angular的前端框架来创建一个动态网站，通过创建组件实现了curd的各项功能，也能保存用户提交的数据，对于我刚开始学习angular来说有了一个初步的进步，但是问题也有很多，总的来说还是不太熟练对于这个angular的使用，但是我在做网页的过程中也发现了angular用来创建网站确实是一个很好的工具，学好了是很有帮助的。最后，我还是要继续学习，慢慢积累，争取能熟练使用它。
1213
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
