Article Directory
The front end of this article uses the vue framework, and the back end of this article uses the net core framework.
The final rendering
1. Front end
In general, that is, appthe file inside, added a productList.vuedocument
1.1App file:
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
1.2 ProductList file
<template>
<div>
<div class="product-search">
<input type="text" id="txtSearch" />
<button>搜索</button>
</div>
<br />
<hr />
<div class="product-list">
<ul>
<!-- key 是必须要加的 -->
<li v-for="product in productList" :key="product.id">
<img src="../../static/u=1119895080,3120720251&fm=26&gp=0.jpg" alt />
<p class="p-price">¥ {
{product.price}}</p>
<p class="p-name">{
{product.productName}}</p>
</li>
</ul>
</div>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "ProductList",
data() {
return {
productList: [],
};
},
mounted() {
this.getProductList();
},
methods: {
getProductList() {
var thisVue = this; // 在使用 axios 之前，需要把 this 先保存一下。
axios({
method: "get",
url: "http://localhost:5000/api/Products/GetProducts",
}).then(function (response) {
thisVue.productList = response.data;
console.log(response.data)
});
},
},
};
</script>
<style scoped>
* {
/* 把浏览器默认的样式改掉，所有的样式都由我自己来掌控 */
padding: 0;
margin: 0;
}
.product-search {
/* 把div 的总长度设置为和外边一样长，然后把 margin 设置为自动填充 */
width: 750px;
margin: auto;
}
#txtSearch {
width: 600px;
height: 36px;
border: 6px solid red;
float: left;
/* 设置鼠标放上去不要有反应 */
outline: none;
/* 为了让进去的时候，打字有空，可以给他设置内边距 */
/* 注意中间不要有逗号 */
padding: 0px 10px;
}
button {
width: 80px;
height: 48px; /* 算一下下边的框，应该是44个像素 */
border: 0 none;
background: red;
color: #fff;
float: left;
/* 设置鼠标放上去不要有反应 */
}
hr {
margin-top: 60px;
border: solid red;
}
.product-list li {
width: 260px;
margin: 60px 60px;
/* 把列表前的小点去掉 */
list-style: none;
/* 把所有的图片向左看齐 */
float: left;
border: 1px solid #fff;
padding: 6px;
}
/* 鼠标放上去有动图 */
.product-list li:hover {
border-color: #ddd;
box-shadow: 0 0 20px #ccc;
}
.product-list img {
width: 260px;
}
.product-list li p {
text-align: left;
font-size: 22px;
}
.p-price {
color: red;
font-weight: bold;
margin-bottom: 10px;
}
</style>
1.3 Item details page
<template>
<div>
<div class="product-info"></div>
<div class="product-info-left">
<img src="../../static/u=2029538042,859585808&fm=26&gp=0.jpg" alt />
</div>
<div class="product-info-right">
<p class="p-name">笔记本电脑</p>
<p class="p-price">¥8555</p>
<p class="p-number">
<span class="sub" @click="subNumber()">-</span>
<input type="text" :value="count" />
<span class="pls" @click="plsNumber()">+</span>
</p>
<p class="p-butten">
<button>加入购物车</button>
</p>
</div>
<br />
<hr />
<div class="product-detail"></div>
</div>
</template>
<script>
export default {
data() {
return {
count: 1,
};
},
created() {
alert("创建以后");
},
mounted() {
// 把路由里的 pid 的值给弄出来，然后再谈出来
var pid = this.$route.query.pid;
alert(pid);
},
methods: {
plsNumber() {
this.count++;
},
subNumber() {
this.count--;
},
},
};
</script>
<style scoped>
/* 让左右两个部分对齐 */
.product-info-left {
float: left;
}
.product-info-right {
float: left;
}
.product-info-right .p-name {
font-size: 40px;
font-weight: bold;
}
.product-info-right .p-price {
font-size: 20px;
font-weight: bold;
color: rgb(206, 38, 38);
}
/* 如何选择 p-button 下面的 button 按钮 */
.product-info-right .p-butten button {
width: 250px;
height: 50px;
background-color: rgb(223, 108, 32);
border: 0 none;
border-radius: 6px; /* 圆角 */
color: #fff;
font-size: 16px;
font-weight: bold;
/* 鼠标放上去，变成手型 */
cursor: pointer;
}
p {
/* 让每行的上下边距拉大一点 */
margin-bottom: 50px;
margin-left: 30px;
/* 都让他们往左对齐 */
text-align: left;
}
.sub{
display: inline-block;
width: 36px;
height: 36px;
border: #ccc solid 1px;
/* 让字体居中 */
text-align: center;
cursor: pointer;
/* 行高,只要和高度一样，那么就一定是居中的 */
line-height: 36px;
border-radius: 3px;
}
.pls{
display: inline-block;
width: 36px;
height: 36px;
border: #ccc solid 1px;
/* 让字体居中 */
text-align: center;
cursor: pointer;
/* 行高,只要和高度一样，那么就一定是居中的 */
line-height: 36px;
border-radius: 3px;
}
.p-number input {
height: 36px;
width: 40px;
border: 1px sold #ccc;
outline: none;
text-align: center;
}
</style>
The renderings are as follows:
2. Back-end program:
2.1 back-end Controllerfile
[Route("api/Products/GetProducts")]
[ApiController]
public class BussinessController : ControllerBase
{
[EnableCors("any")]
[HttpGet]
public IActionResult GetProducts()
{
List<Product> products = new List<Product>
{
new Product(){
id=1,price=5,productName="袜子"},
new Product() {
id = 2, price = 49999, productName = "电脑" },
new Product() {
id = 3, price = 120, productName = "鞋子" },
};
return Ok(products);
}
}
2.2 Solve cross-domain issues
public class Startup
{
public Startup(IConfiguration configuration)
{
Configuration = configuration;
}
public IConfiguration Configuration {
get; }
public void ConfigureServices(IServiceCollection services)
{
services.AddControllers();
services.AddCors( //添加跨域
option => option.AddPolicy(
"any", //跨域的名字
p => p
.AllowAnyOrigin() // 允许任何域名
.AllowAnyHeader() // 允许任何head
.AllowAnyMethod() // 允许任何方法
//.WithOrigins() // 允许哪些域名
));
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
app.UseRouting();
app.UseAuthorization();
app.UseCors(); // 在中间使用跨域
app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
});
}
}